Menu support transition fixed #514
This commit is contained in:
parent
75c32564f0
commit
841cb1fe67
6 changed files with 195 additions and 186 deletions
79
src/components/base/collapse-transition.js
Normal file
79
src/components/base/collapse-transition.js
Normal file
|
@ -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);
|
||||
}
|
||||
};
|
|
@ -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],
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue