Merge pull request #2 from LukePulverenti/master

update easing
ericktatsui · Dec 23, 2016 · 294850b · 294850b
2 parents ba0acc5 + 5bf05a1
commit 294850b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/sample.html b/sample.html
@@ -4,7 +4,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="initial-scale=1">
 	<title>Sample - Touch Menu Like Android</title>
-	<link rel="stylesheet" href="src/css/touch-tabs-la.min.css">
+	<link rel="stylesheet" href="src/css/touch-menu-la.css">
 	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -48,7 +48,7 @@
 	</div>
 
 	<script src="lib/hammerjs/hammer.min.js"></script>
-	<script src="src/js/touch-tabs-la.min.js"></script>
+	<script src="src/js/touch-menu-la.js"></script>
 	<script>
 	var TouchMenu = TouchMenuLA({
 		target: document.getElementById('menu')

diff --git a/src/css/touch-menu-la.css b/src/css/touch-menu-la.css
@@ -16,18 +16,18 @@
     }
 
     .touch-menu-la.opened {
-        transition: all 0.3s ease !important;
-        -webkit-transition: all 0.3s ease !important;
-        -moz-transition: all 0.3s ease !important;
+        transition: all 0.3s ease-out !important;
+        -webkit-transition: all 0.3s ease-out !important;
+        -moz-transition: all 0.3s ease-out !important;
     }
 
     .touch-menu-la.closed {
-        transition: all 0.3s ease !important;
-        -webkit-transition: all 0.3s ease !important;
-        -moz-transition: all 0.3s ease !important;
-        transform: translate3d(0, 0, 0) !important;
-        -webkit-transform: translate3d(0, 0, 0) !important;
-        -moz-transform: translate3d(0, 0, 0) !important;
+        transition: all 0.3s ease-out !important;
+        -webkit-transition: all 0.3s ease-out !important;
+        -moz-transition: all 0.3s ease-out !important;
+        transform: none !important;
+        -webkit-transform: none !important;
+        -moz-transform: none !important;
     }
 
 .tmla-mask {

diff --git a/src/js/touch-menu-la.js b/src/js/touch-menu-la.js
@@ -66,12 +66,17 @@ var TouchMenuLA = function (options) {
         });
     };
 
+    TouchMenuLA.prototype.animateToPosition = function (pos) {
+        options.target.style.transform = 'translate3d(' + pos + 'px, 0, 0)';
+        options.target.style.WebkitTransform = 'translate3d(' + pos + 'px, 0, 0)';
+        options.target.style.MozTransform = 'translate3d(' + pos + 'px, 0, 0)';
+
+    };
+
     TouchMenuLA.prototype.changeMenuPos = function () {
         if (newPos <= options.width) {
             options.target.className = menuClassName + ' tmla-menu';
-            options.target.style.transform = 'translate3d(' + newPos + 'px, 0, 0)';
-            options.target.style.WebkitTransform = 'translate3d(' + newPos + 'px, 0, 0)';
-            options.target.style.MozTransform = 'translate3d(' + newPos + 'px, 0, 0)';
+            this.animateToPosition(newPos);
 
             if (!options.disableMask) {
                 this.setMaskOpacity(newPos);
@@ -147,9 +152,7 @@ var TouchMenuLA = function (options) {
 
     TouchMenuLA.prototype.open = function () {
         options.target.className = menuClassName + " tmla-menu opened";
-        options.target.style.transform = 'translate3d(' + options.width + 'px, 0, 0)';
-        options.target.style.WebkitTransform = 'translate3d(' + options.width + 'px, 0, 0)';
-        options.target.style.MozTransform = 'translate3d(' + options.width + 'px, 0, 0)';
+        this.animateToPosition(options.width);
 
         currentPos = options.width;
         this.isVisible = true;