Vue-内容展开收起过渡效果(借鉴某位大佬，不知道出处了)
1.定义collapseTransition .js
1 const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'; 2 const Transition = { 3 'before-enter'(el) { 4 el.style.transition = elTransition; 5 if (!el.dataset) el.dataset = {}; 6 el.dataset.oldPaddingTop = el.style.paddingTop; 7 el.dataset.oldPaddingBottom = el.style.paddingBottom; 8 el.style.height = 0; 9 el.style.paddingTop = 0; 10 el.style.paddingBottom = 0; 11 }, 12 enter(el) { 13 el.dataset.oldOverflow = el.style.overflow; 14 if (el.scrollHeight !== 0) { 15 el.style.height = el.scrollHeight + 'px'; 16 el.style.paddingTop = el.dataset.oldPaddingTop; 17 el.style.paddingBottom = el.dataset.oldPaddingBottom; 18 } else { 19 el.style.height = ''; 20 el.style.paddingTop = el.dataset.oldPaddingTop; 21 el.style.paddingBottom = el.dataset.oldPaddingBottom; 22 } 23 el.style.overflow = 'hidden'; 24 }, 25 'after-enter'(el) { 26 el.style.transition = ''; 27 el.style.height = ''; 28 el.style.overflow = el.dataset.oldOverflow; 29 }, 30 'before-leave'(el) { 31 if (!el.dataset) el.dataset = {}; 32 el.dataset.oldPaddingTop = el.style.paddingTop; 33 el.dataset.oldPaddingBottom = el.style.paddingBottom; 34 el.dataset.oldOverflow = el.style.overflow; 35 36 el.style.height = el.scrollHeight + 'px'; 37 el.style.overflow = 'hidden'; 38 }, 39 leave(el) { 40 if (el.scrollHeight !== 0) { 41 el.style.transition = elTransition; 42 el.style.height = 0; 43 el.style.paddingTop = 0; 44 el.style.paddingBottom = 0; 45 } 46 }, 47 'after-leave'(el) { 48 el.style.transition = ''; 49 el.style.height = ''; 50 el.style.overflow = el.dataset.oldOverflow; 51 el.style.paddingTop = el.dataset.oldPaddingTop; 52 el.style.paddingBottom = el.dataset.oldPaddingBottom; 53 } 54 }; 55 export default { 56 name: 'collapseTransition', 57 functional: true, 58 render(h, {children}) { 59 const data = { 60 on: Transition 61 }; 62 return h('transition', data, children); 63 } 64 };
2.引入
组件内引入
import collapseTransition from '../collapseTransition.js';
3.使用
1 <collapseTransition> 2 <div v-show="drawStatus"> 3 </div> 4 </collapseTransition>
4.说明:
改变drawStatus状态即可
