Remove height/margin animation

REInVent650 · Jul 18, 2017 · fb07ddc · fb07ddc
1 parent 8e22beb
commit fb07ddc
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 111 deletions.
diff --git a/docs/pages/documentation/general/Menu.vue b/docs/pages/documentation/general/Menu.vue
@@ -271,13 +271,6 @@
                         values: '—',
                         default: '<code>true</code>'
                     },
-                    {
-                        name: '<code>animated</code>',
-                        description: 'Animate dropdown toggle',
-                        type: 'Boolean',
-                        values: '—',
-                        default: '<code>true</code>'
-                    },
                     {
                         name: '<code>router</code>',
                         description: `Set it true when using a custom anchor tag or <code>router-link</code>.

diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
@@ -11,10 +11,6 @@ export default {
         event: 'change'
     },
     props: {
-        animated: {
-            type: Boolean,
-            default: true
-        },
         autoClose: {
             type: Boolean,
             default: true

diff --git a/src/components/menu/MenuDropdown.vue b/src/components/menu/MenuDropdown.vue
@@ -1,19 +1,9 @@
 <template>
-    <li class="b-menu-dropdown" :class="{ 'is-active': isActive, 'is-animated': menu.animated }">
+    <li class="b-menu-dropdown" :class="{ 'is-active': isActive }">
         <a @click="toggle"><slot name="trigger"></slot></a>
-        <transition
-            @beforeEnter="beforeEnter"
-            @enter="enter"
-            @after-enter="afterTransition"
-            @enter-cancelled="cancelTransition"
-            @before-leave="beforeLeave"
-            @leave="leave"
-            @after-leave="afterTransition"
-            @leave-cancelled="cancelTransition">
-            <ul v-show="isActive">
-                <slot></slot>
-            </ul>
-        </transition>
+        <ul v-show="isActive">
+            <slot></slot>
+        </ul>
     </li>
 </template>
 
@@ -69,87 +59,6 @@ export default {
                 this.menu.collapse(this.rootDropdown)
             }
             this.isActive = !this.isActive
-        },
-
-        /**
-         * Before active expand animation,
-         * set height and margin to zero.
-         */
-        beforeEnter(el) {
-            if (!this.menu.animated) return
-
-            el.style.transition = 'none'
-            el.style.overflow = 'hidden'
-            el.style.height = 0
-            el.style.marginTop = 0
-            el.style.marginBottom = 0
-        },
-
-        /**
-         * When active expand animation,
-         * change height and margin to its actual value.
-         */
-        enter(el) {
-            if (!this.menu.animated) return
-
-            el.style.transition = null
-            el.style.height = `${el.scrollHeight}px`
-            el.style.marginTop = null
-            el.style.marginBottom = null
-        },
-
-        /**
-         * Before active collapse animation,
-         * set current height.
-         */
-        beforeLeave(el) {
-            if (!this.menu.animated) return
-
-            el.style.transition = 'none'
-            el.style.overflow = 'hidden'
-            el.style.height = `${el.scrollHeight}px`
-        },
-
-        /**
-         * When active collapse animation,
-         * change height and margin to zero.
-         */
-        leave(el) {
-            if (!this.menu.animated) return
-
-            el.style.transition = null
-            el.style.marginTop = 0
-            el.style.marginBottom = 0
-            // Delay height changing. Otherwise, height will change immediately (no animation).
-            setTimeout(() => {
-                el.style.height = 0
-            }, 0)
-        },
-
-        /**
-         * After animated,
-         * remove the binding styles.
-         */
-        afterTransition(el) {
-            if (!this.menu.animated) return
-
-            el.style.overflow = null
-            el.style.height = null
-            el.style.marginTop = null
-            el.style.marginBottom = null
-        },
-
-        /**
-         * When the animation is cancelled,
-         * reset the animation.
-         */
-        cancelTransition(el) {
-            if (!this.menu.animated) return
-
-            el.style.transition = 'none'
-            setTimeout(() => {
-                el.style.transition = null
-            }, 0)
         }
     }
 }

diff --git a/src/scss/components/_menu.scss b/src/scss/components/_menu.scss
@@ -35,9 +35,4 @@
             margin-top: -0.125em;
         }
     }
-
-    &.is-animated > ul {
-        transition: height $speed-slow $easing,
-            margin $speed-slow $easing;
-    }
 }