@@ -5,7 +5,7 @@ const enterClick = () => items.value.push('d', 'e')
5
5
const leaveClick = () => (items .value = [' b' ])
6
6
const enterLeaveClick = () => (items .value = [' b' , ' c' , ' d' ])
7
7
const appear = ref (false )
8
- window .setAppear = () => appear .value = true
8
+ window .setAppear = () => ( appear .value = true )
9
9
const moveClick = () => (items .value = [' d' , ' b' , ' a' ])
10
10
11
11
const name = ref (' invalid' )
@@ -53,8 +53,13 @@ const eventsClick = () => (items.value = ['b', 'c', 'd'])
53
53
<div class =" appear" >
54
54
<button @click =" enterClick" >appear button</button >
55
55
<div v-if =" appear" >
56
- <transition-group appear appear-from-class =" test-appear-from" appear-to-class =" test-appear-to"
57
- appear-active-class =" test-appear-active" name =" test" >
56
+ <transition-group
57
+ appear
58
+ appear-from-class =" test-appear-from"
59
+ appear-to-class =" test-appear-to"
60
+ appear-active-class =" test-appear-active"
61
+ name =" test"
62
+ >
58
63
<div v-for =" item in items" :key =" item" class =" test" >{{ item }}</div >
59
64
</transition-group >
60
65
</div >
@@ -79,12 +84,22 @@ const eventsClick = () => (items.value = ['b', 'c', 'd'])
79
84
<div class =" events" >
80
85
<button @click =" eventsClick" >events button</button >
81
86
<div v-if =" appear" >
82
- <transition-group name =" test" appear appear-from-class =" test-appear-from" appear-to-class =" test-appear-to"
83
- appear-active-class =" test-appear-active" @beforeEnter =" () => calls.push('beforeEnter')"
84
- @enter =" () => calls.push('onEnter')" @afterEnter =" () => calls.push('afterEnter')"
85
- @beforeLeave =" () => calls.push('beforeLeave')" @leave =" () => calls.push('onLeave')"
86
- @afterLeave =" () => calls.push('afterLeave')" @beforeAppear =" () => calls.push('beforeAppear')"
87
- @appear =" () => calls.push('onAppear')" @afterAppear =" () => calls.push('afterAppear')" >
87
+ <transition-group
88
+ name =" test"
89
+ appear
90
+ appear-from-class =" test-appear-from"
91
+ appear-to-class =" test-appear-to"
92
+ appear-active-class =" test-appear-active"
93
+ @beforeEnter =" () => calls.push('beforeEnter')"
94
+ @enter =" () => calls.push('onEnter')"
95
+ @afterEnter =" () => calls.push('afterEnter')"
96
+ @beforeLeave =" () => calls.push('beforeLeave')"
97
+ @leave =" () => calls.push('onLeave')"
98
+ @afterLeave =" () => calls.push('afterLeave')"
99
+ @beforeAppear =" () => calls.push('beforeAppear')"
100
+ @appear =" () => calls.push('onAppear')"
101
+ @afterAppear =" () => calls.push('afterAppear')"
102
+ >
88
103
<div v-for =" item in items" :key =" item" class =" test" >{{ item }}</div >
89
104
</transition-group >
90
105
</div >
0 commit comments