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],