| import { addClass, removeClass } from 'element-ui/src/utils/dom'; |
|
|
| class 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) { |
| |
| 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) { |
| |
| 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: 'ElCollapseTransition', |
| functional: true, |
| render(h, { children }) { |
| const data = { |
| on: new Transition() |
| }; |
|
|
| return h('transition', data, children); |
| } |
| }; |
|
|
