Menu support transition fixed #514

src/components/base/collapse-transition.js

@@ -0,0 +1,79 @@
+// Thanks to https://github.com/ElemeFE/element/blob/dev/src/transitions/collapse-transition.js
+
+import { addClass, removeClass } from '../../utils/assist';
+
+const Transition = {
+    beforeEnter(el) {
+        addClass(el, 'collapse-transition');
+        if (!el.dataset) el.dataset = {};
+
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+        el.style.height = '0';
+        el.style.paddingTop = 0;
+        el.style.paddingBottom = 0;
+    },
+
+    enter(el) {
+        el.dataset.oldOverflow = el.style.overflow;
+        if (el.scrollHeight !== 0) {
+            el.style.height = el.scrollHeight + 'px';
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        } else {
+            el.style.height = '';
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        }
+
+        el.style.overflow = 'hidden';
+    },
+
+    afterEnter(el) {
+        // for safari: remove class then reset height is necessary
+        removeClass(el, 'collapse-transition');
+        el.style.height = '';
+        el.style.overflow = el.dataset.oldOverflow;
+    },
+
+    beforeLeave(el) {
+        if (!el.dataset) el.dataset = {};
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+        el.dataset.oldOverflow = el.style.overflow;
+
+        el.style.height = el.scrollHeight + 'px';
+        el.style.overflow = 'hidden';
+    },
+
+    leave(el) {
+        if (el.scrollHeight !== 0) {
+            // for safari: add class after set height, or it will jump to zero height suddenly, weired
+            addClass(el, 'collapse-transition');
+            el.style.height = 0;
+            el.style.paddingTop = 0;
+            el.style.paddingBottom = 0;
+        }
+    },
+
+    afterLeave(el) {
+        removeClass(el, 'collapse-transition');
+        el.style.height = '';
+        el.style.overflow = el.dataset.oldOverflow;
+        el.style.paddingTop = el.dataset.oldPaddingTop;
+        el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    }
+};
+
+export default {
+    name: 'CollapseTransition',
+    functional: true,
+    render(h, { children }) {
+        const data = {
+            on: Transition
+        };
+
+        return h('transition', data, children);
+    }
+};

src/components/menu/submenu.vue

@@ -4,7 +4,9 @@
             <slot name="title"></slot>
             <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
         </div>
-        <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
+        <collapse-transition v-if="mode === 'vertical'">
+            <ul :class="[prefixCls]" v-show="opened"><slot></slot></ul>
+        </collapse-transition>
         <transition name="slide-up" v-else>
             <Drop
                 v-show="opened"
@@ -17,6 +19,7 @@
 <script>
     import Drop from '../select/dropdown.vue';
     import Icon from '../icon/icon.vue';
+    import CollapseTransition from '../base/collapse-transition';
     import { getStyle, findComponentUpward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
 
@@ -25,7 +28,7 @@
     export default {
         name: 'Submenu',
         mixins: [ Emitter ],
-        components: { Icon, Drop },
+        components: { Icon, Drop, CollapseTransition },
         props: {
             name: {
                 type: [String, Number],

src/styles/animation/index.less

@@ -25,4 +25,8 @@
 @import "fade";
 @import "move";
 @import "ease";
-@import "slide";
+@import "slide";
+
+.collapse-transition {
+    transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
+}

src/utils/assist.js

@@ -232,4 +232,66 @@ function findComponentsDownward (context, componentName, components = []) {
     }
     return components;
 }
-export {findComponentsDownward};
+export {findComponentsDownward};
+
+/* istanbul ignore next */
+const trim = function(string) {
+    return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+
+/* istanbul ignore next */
+export function hasClass(el, cls) {
+    if (!el || !cls) return false;
+    if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+    if (el.classList) {
+        return el.classList.contains(cls);
+    } else {
+        return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+    }
+}
+
+/* istanbul ignore next */
+export function addClass(el, cls) {
+    if (!el) return;
+    let curClass = el.className;
+    const classes = (cls || '').split(' ');
+
+    for (let i = 0, j = classes.length; i < j; i++) {
+        const clsName = classes[i];
+        if (!clsName) continue;
+
+        if (el.classList) {
+            el.classList.add(clsName);
+        } else {
+            if (!hasClass(el, clsName)) {
+                curClass += ' ' + clsName;
+            }
+        }
+    }
+    if (!el.classList) {
+        el.className = curClass;
+    }
+}
+
+/* istanbul ignore next */
+export function removeClass(el, cls) {
+    if (!el || !cls) return;
+    const classes = cls.split(' ');
+    let curClass = ' ' + el.className + ' ';
+
+    for (let i = 0, j = classes.length; i < j; i++) {
+        const clsName = classes[i];
+        if (!clsName) continue;
+
+        if (el.classList) {
+            el.classList.remove(clsName);
+        } else {
+            if (hasClass(el, clsName)) {
+                curClass = curClass.replace(' ' + clsName + ' ', ' ');
+            }
+        }
+    }
+    if (!el.classList) {
+        el.className = trim(curClass);
+    }
+}