1 |
|
2 |
|
3 |
|
4 | import { addClass, removeClass } from './util';
|
5 |
|
6 | const Transition = {
|
7 | beforeEnter (el) {
|
8 | addClass(el, 'collapse-transition')
|
9 | if (!el.dataset) el.dataset = {}
|
10 |
|
11 |
|
12 |
|
13 |
|
14 | el.style.height = '0'
|
15 |
|
16 |
|
17 | },
|
18 |
|
19 | enter (el) {
|
20 | el.dataset.oldOverflow = el.style.overflow
|
21 | if (el.scrollHeight !== 0) {
|
22 | el.style.height = `${el.scrollHeight}px`
|
23 |
|
24 |
|
25 | } else {
|
26 | el.style.height = ''
|
27 |
|
28 |
|
29 | }
|
30 |
|
31 | el.style.overflow = 'hidden'
|
32 | },
|
33 |
|
34 | afterEnter (el) {
|
35 |
|
36 | removeClass(el, 'collapse-transition')
|
37 | el.style.height = ''
|
38 | el.style.overflow = el.dataset.oldOverflow
|
39 | },
|
40 |
|
41 | beforeLeave (el) {
|
42 | if (!el.dataset) el.dataset = {}
|
43 |
|
44 |
|
45 | el.dataset.oldOverflow = el.style.overflow
|
46 |
|
47 | el.style.height = `${el.scrollHeight}px`
|
48 | el.style.overflow = 'hidden'
|
49 | },
|
50 |
|
51 | leave (el) {
|
52 | if (el.scrollHeight !== 0) {
|
53 |
|
54 | addClass(el, 'collapse-transition')
|
55 | el.style.height = 0
|
56 |
|
57 |
|
58 | }
|
59 | },
|
60 |
|
61 | afterLeave (el) {
|
62 | removeClass(el, 'collapse-transition')
|
63 | el.style.height = ''
|
64 | el.style.overflow = el.dataset.oldOverflow
|
65 |
|
66 |
|
67 | }
|
68 | }
|
69 |
|
70 | export default {
|
71 | name: 'CollapseTransition',
|
72 | functional: true,
|
73 | render (h, { children }) {
|
74 | const data = {
|
75 | on: Transition
|
76 | }
|
77 |
|
78 | return h('transition', data, children)
|
79 | }
|
80 | }
|