menu slide animation

Levan-Du · Jun 25, 2017 · 516238c · 516238c
1 parent dcf1314
commit 516238c
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 82 deletions.
diff --git a/dist/js/hack.js b/dist/js/hack.js
@@ -1,8 +1,10 @@
 if (!Array.prototype.forEach) {
     Array.prototype.forEach = function(callback) {
-        var arr = this;
-        for (var i in arr) {
-            callback(arr[i], parseInt(i), arr);
+        var _arr = this;
+        for (var i in _arr) {
+            if (_arr.hasOwnProperty(i)) {
+                callback(_arr[i], parseInt(i), _arr);
+            }
         }
     }
 }
@@ -33,7 +35,7 @@ if (!Array.prototype.find) {
     Array.prototype.find = function(callback) {
         var _arr = this;
         for (var i in _arr) {
-            if (callback(_arr[i], parseInt(i), _arr)) {
+            if (_arr.hasOwnProperty(i) && callback(_arr[i], parseInt(i), _arr)) {
                 return _arr[i];
             }
         }
@@ -47,7 +49,7 @@ if (!Array.prototype.findIndex) {
         var _arr = this;
         for (var i in _arr) {
             var j = parseInt(i)
-            if (callback(_arr[i], j, _arr)) {
+            if (_arr.hasOwnProperty(i) && callback(_arr[i], j, _arr)) {
                 return j;
             }
         }
@@ -60,7 +62,9 @@ if (!Array.prototype.reduce) {
         var _arr = this,
             r = callback(_arr[0], _arr[1], 0, _arr);
         for (var i = 1; i < _arr.length - 2; i++) {
-            r = callback(r, _arr[i + 1], i, _arr);
+            if (_arr.hasOwnProperty(i)) {
+                r = callback(r, _arr[i + 1], i, _arr);
+            }
         }
         return r;
     }
@@ -70,7 +74,7 @@ if (!Array.prototype.some) {
     Array.prototype.some = function(callback) {
         var _arr = this;
         for (var i in _arr) {
-            if (callback(_arr[i], parseInt(i), _arr)) {
+            if (_arr.hasOwnProperty(i) && callback(_arr[i], parseInt(i), _arr)) {
                 return true;
             }
         }
@@ -82,7 +86,7 @@ if (!Array.prototype.every) {
     Array.prototype.every = function(callback) {
         var _arr = this;
         for (var i in _arr) {
-            if (!callback(_arr[i], parseInt(i), _arr)) {
+            if (_arr.hasOwnProperty(i) && !callback(_arr[i], parseInt(i), _arr)) {
                 return false;
             }
         }
@@ -94,7 +98,7 @@ if (!Array.prototype.indexOf) {
     Array.prototype.indexOf = function(el) {
         var _arr = this;
         for (var i in _arr) {
-            if (arr[i] === el) {
+            if (_arr.hasOwnProperty(i) && arr[i] === el) {
                 return parseInt(i);
             }
         }
@@ -129,20 +133,13 @@ if (!Array.prototype.indexOf) {
     };
 }();
 
+
+
 if (!Function.prototype.bind) {
-    Function.prototype.bind = function(oThis) {
-        if (typeof this !== "function") {
-            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+    Function.prototype.bind = function(thisValue) {
+        var _this = this;
+        return function() {
+            _this.call(thisValue, arguments);
         }
-        var aArgs = Array.prototype.slice.call(arguments, 1),
-            fToBind = this,
-            fNOP = function() {},
-            fBound = function() {
-                return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
-                    aArgs.concat(Array.prototype.slice.call(arguments)));
-            };
-        fNOP.prototype = this.prototype;
-        fBound.prototype = new fNOP();
-        return fBound;
-    };
+    }
 }
diff --git a/src/common/hack/hack.js b/src/common/hack/hack.js
@@ -1,8 +1,10 @@
 if (!Array.prototype.forEach) {
     Array.prototype.forEach = function(callback) {
-        var arr = this;
-        for (var i in arr) {
-            callback(arr[i], parseInt(i), arr);
+        var _arr = this;
+        for (var i in _arr) {
+            if (_arr.hasOwnProperty(i)) {
+                callback(_arr[i], parseInt(i), _arr);
+            }
         }
     }
 }
@@ -33,7 +35,7 @@ if (!Array.prototype.find) {
     Array.prototype.find = function(callback) {
         var _arr = this;
         for (var i in _arr) {
-            if (callback(_arr[i], parseInt(i), _arr)) {
+            if (_arr.hasOwnProperty(i) && callback(_arr[i], parseInt(i), _arr)) {
                 return _arr[i];
             }
         }
@@ -47,7 +49,7 @@ if (!Array.prototype.findIndex) {
         var _arr = this;
         for (var i in _arr) {
             var j = parseInt(i)
-            if (callback(_arr[i], j, _arr)) {
+            if (_arr.hasOwnProperty(i) && callback(_arr[i], j, _arr)) {
                 return j;
             }
         }
@@ -60,7 +62,9 @@ if (!Array.prototype.reduce) {
         var _arr = this,
             r = callback(_arr[0], _arr[1], 0, _arr);
         for (var i = 1; i < _arr.length - 2; i++) {
-            r = callback(r, _arr[i + 1], i, _arr);
+            if (_arr.hasOwnProperty(i)) {
+                r = callback(r, _arr[i + 1], i, _arr);
+            }
         }
         return r;
     }
@@ -70,7 +74,7 @@ if (!Array.prototype.some) {
     Array.prototype.some = function(callback) {
         var _arr = this;
         for (var i in _arr) {
-            if (callback(_arr[i], parseInt(i), _arr)) {
+            if (_arr.hasOwnProperty(i) && callback(_arr[i], parseInt(i), _arr)) {
                 return true;
             }
         }
@@ -82,7 +86,7 @@ if (!Array.prototype.every) {
     Array.prototype.every = function(callback) {
         var _arr = this;
         for (var i in _arr) {
-            if (!callback(_arr[i], parseInt(i), _arr)) {
+            if (_arr.hasOwnProperty(i) && !callback(_arr[i], parseInt(i), _arr)) {
                 return false;
             }
         }
@@ -94,20 +98,30 @@ if (!Array.prototype.indexOf) {
     Array.prototype.indexOf = function(el) {
         var _arr = this;
         for (var i in _arr) {
-            if (arr[i] === el) {
+            if (_arr.hasOwnProperty(i) && arr[i] === el) {
                 return parseInt(i);
             }
         }
         return -1;
     }
 }
 
+
+if (!Function.prototype.bind) {
+    Function.prototype.bind = function(thisValue) {
+        var _this = this;
+        return function() {
+            _this.call(thisValue, arguments);
+        }
+    }
+}
+
+
 ! function() {
-    var DONT_ENUM = "propertyIsEnumerable,isPrototypeOf,hasOwnProperty,toLocaleString,toString,valueOf,constructor".split(","),
-        hasOwn = ({}).hasOwnProperty;
-    for (var i in {
-            toString: 1
-        }) {
+    var objT = { toString: 1 },
+        DONT_ENUM = "propertyIsEnumerable,isPrototypeOf,hasOwnProperty,toLocaleString,toString,valueOf,constructor".split(","),
+        hasOwn = (objT).hasOwnProperty;
+    for (var i in objT) {
         DONT_ENUM = false;
     }
 
@@ -129,20 +143,3 @@ if (!Array.prototype.indexOf) {
     };
 }();
 
-if (!Function.prototype.bind) {
-    Function.prototype.bind = function(oThis) {
-        if (typeof this !== "function") {
-            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
-        }
-        var aArgs = Array.prototype.slice.call(arguments, 1),
-            fToBind = this,
-            fNOP = function() {},
-            fBound = function() {
-                return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
-                    aArgs.concat(Array.prototype.slice.call(arguments)));
-            };
-        fNOP.prototype = this.prototype;
-        fBound.prototype = new fNOP();
-        return fBound;
-    };
-}
diff --git a/src/components/Menu/index.css b/src/components/Menu/index.css
@@ -54,11 +54,11 @@
 .submenu {
     color: #ddd;
     padding-bottom: 1rem;
-    display: none;
+    /*display: none;*/
 }
 
 .submenu.checked {
-    display: block;
+    /*display: block;*/
     background: #2a3845;
 }
 

diff --git a/src/components/Menu/index.html b/src/components/Menu/index.html
@@ -7,7 +7,7 @@
                 <span class="text">{{m.title}}</span>
             </a>
         </div>
-        <ul ms-class="['submenu',m.checked&&'checked']">
+        <ul ms-class="['submenu',m.checked&&'checked']" ms-effect="{is:'slide',action:m.aniAction}">
             <li ms-for="sm in submenuArr[m.id]" ms-class="['submenu__item',sm.checked&&'checked']">
                 <ms-navlink ms-widget="{to:sm.path,click:subMenuItemClick,data:sm}">
                     {{sm.title}}

diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js
@@ -12,17 +12,29 @@ var selectedSubMenuItem = submenuArr[1][0];
 component('ms-menu', {
     template: require('./index.html'),
     defaults: {
-        menus,
+        menus: menus.map(el => {
+            el.aniAction = 'leave';
+            return el
+        }),
         submenus: submenus.filter(s => s.id !== 0),
         submenuArr,
         selectedSubMenuItem,
+        aniAction: 'leave',
         menuItemClick(e, item) {
             var preIndex = this.menus.findIndex(el => el.checked);
             var currIndex = this.menus.findIndex(el => item.id === el.id);
 
+            if (preIndex === currIndex) {
+                this.menus[currIndex].checked = !this.menus[currIndex].checked;
+                this.menus[currIndex].aniAction = this.menus[currIndex].aniAction === 'leave' ? 'enter' : 'leave';
+                return false;
+            }
+
             this.menus[currIndex].checked = preIndex > 0 && preIndex === currIndex ? !this.menus[preIndex].checked : true;
+            this.menus[currIndex].aniAction = this.menus[currIndex].aniAction === 'leave' ? 'enter' : 'leave';
             if (preIndex >= 0) {
                 this.menus[preIndex].checked = false;
+                this.menus[preIndex].aniAction = this.menus[preIndex].aniAction === 'leave' ? 'enter' : 'leave';
             }
         },
         subMenuItemClick(e) {
@@ -39,7 +51,7 @@ component('ms-menu', {
             this.selectedSubMenuItem = this.submenuArr[currItem.pid][currIndex];
         },
         onInit(e) {
-
+            this.aniAction = 'enter';
         },
         onReady(e) {
 

diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,7 @@ import 'bootstrap';
 import './common/common.css';
 import './index.css';
 import './components';
+import './services';
 import './services/routes';
 import './pages';
 import './vmodels';
diff --git a/src/services/animate/index.js b/src/services/animate/index.js
@@ -0,0 +1,24 @@
+import avalon from 'avalon2';
+
+
+avalon.effect('fade', {
+    enter: function(el, done) {
+        $(el).fadeIn('fast', done);
+    },
+    leave: function(el, done) {
+        $(el).hide();
+    }
+});
+
+avalon.effect('slide', {
+    enter: function(el, done) {
+        $(el).show();
+        var _height = $(el).children().length * 32;
+        $(el).animate({ height: _height + 'px' }, 200, 'swing', done);
+    },
+    leave: function(el, done) {
+        $(el).animate({ height: 0 }, 200, 'swing', () => {
+            $(el).hide();
+        });
+    }
+});
diff --git a/src/services/index.js b/src/services/index.js
@@ -0,0 +1 @@
+import './animate';
diff --git a/src/services/routes/Route/index.js b/src/services/routes/Route/index.js
@@ -85,26 +85,3 @@ component('ms-route', {
         onDispose(e) {}
     }
 })
-
-
-avalon.effect('fade', {
-    enter: function(el, done) {
-        $(el).fadeIn('fast', done);
-    },
-    leave: function(el, done) {
-        // $(el).fadeOut('fast', done);
-        $(el).hide();
-    }
-});
-
-avalon.effect('zoomIn', {
-    enter: function(el, done) {
-        $(el).show();
-        $(el).animate({ width: '100%', height: '100%' }, 300, 'swing', () => {
-            console.log();
-        });
-    },
-    leave: function(el, done) {
-        $(el).hide();
-    }
-});