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状态即可