Skip to content

Commit 0987bb5

Browse files
luwueryyx990803
luwuer
authored and
yyx990803
committed
fix(runtime-dom): transition component does not work with "*-leave-from" (vuejs#2593)
1 parent 7762bee commit 0987bb5

File tree

3 files changed

+17
-31
lines changed

3 files changed

+17
-31
lines changed

‎packages/runtime-dom/src/components/Transition.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,9 @@ export function resolveTransitionProps(
146146
onAppear: makeEnterHook(true),
147147
onLeave(el, done) {
148148
const resolve = () => finishLeave(el, done)
149-
addTransitionClass(el, leaveActiveClass)
150149
addTransitionClass(el, leaveFromClass)
151150
nextFrame(() => {
151+
addTransitionClass(el, leaveActiveClass)
152152
removeTransitionClass(el, leaveFromClass)
153153
addTransitionClass(el, leaveToClass)
154154
if (!(onLeave && onLeave.length > 1)) {

‎packages/vue/__tests__/Transition.spec.ts

+10-24
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ describe('e2e: Transition', () => {
5959
// leave
6060
expect(await classWhenTransitionStart()).toStrictEqual([
6161
'test',
62-
'v-leave-active',
6362
'v-leave-from'
6463
])
6564
await nextFrame()
@@ -114,7 +113,6 @@ describe('e2e: Transition', () => {
114113
// leave
115114
expect(await classWhenTransitionStart()).toStrictEqual([
116115
'test',
117-
'test-leave-active',
118116
'test-leave-from'
119117
])
120118
await nextFrame()
@@ -174,7 +172,6 @@ describe('e2e: Transition', () => {
174172
// leave
175173
expect(await classWhenTransitionStart()).toStrictEqual([
176174
'test',
177-
'bye-active',
178175
'bye-from'
179176
])
180177
await nextFrame()
@@ -232,7 +229,6 @@ describe('e2e: Transition', () => {
232229
// leave
233230
expect(await classWhenTransitionStart()).toStrictEqual([
234231
'test',
235-
'test-leave-active',
236232
'test-leave-from'
237233
])
238234
await nextFrame()
@@ -328,7 +324,6 @@ describe('e2e: Transition', () => {
328324
// leave
329325
expect(await classWhenTransitionStart()).toStrictEqual([
330326
'test',
331-
'test-leave-active',
332327
'test-leave-from'
333328
])
334329
// todo test event with arguments. Note: not get dom, get object. '{}'
@@ -415,7 +410,6 @@ describe('e2e: Transition', () => {
415410
// cancel (leave)
416411
expect(await classWhenTransitionStart()).toStrictEqual([
417412
'test',
418-
'test-leave-active',
419413
'test-leave-from'
420414
])
421415
expect(enterCancelledSpy).toBeCalled()
@@ -471,7 +465,6 @@ describe('e2e: Transition', () => {
471465
// leave
472466
expect(await classWhenTransitionStart()).toStrictEqual([
473467
'test',
474-
'test-leave-active',
475468
'test-leave-from'
476469
])
477470
await nextFrame()
@@ -604,7 +597,6 @@ describe('e2e: Transition', () => {
604597
// leave
605598
expect(await classWhenTransitionStart()).toStrictEqual([
606599
'test',
607-
'test-leave-active',
608600
'test-leave-from'
609601
])
610602
expect(beforeLeaveSpy).toBeCalled()
@@ -746,7 +738,6 @@ describe('e2e: Transition', () => {
746738

747739
// leave
748740
expect(await classWhenTransitionStart()).toStrictEqual([
749-
'noop-leave-active',
750741
'noop-leave-from'
751742
])
752743
await nextFrame()
@@ -787,7 +778,6 @@ describe('e2e: Transition', () => {
787778

788779
// leave
789780
expect(await classWhenTransitionStart()).toStrictEqual([
790-
'test-anim-leave-active',
791781
'test-anim-leave-from'
792782
])
793783
await nextFrame()
@@ -834,7 +824,6 @@ describe('e2e: Transition', () => {
834824

835825
// leave
836826
expect(await classWhenTransitionStart()).toStrictEqual([
837-
'test-anim-long-leave-active',
838827
'test-anim-long-leave-from'
839828
])
840829
await nextFrame()
@@ -913,7 +902,6 @@ describe('e2e: Transition', () => {
913902
// leave
914903
expect(await svgTransitionStart()).toStrictEqual([
915904
'test',
916-
'test-leave-active',
917905
'test-leave-from'
918906
])
919907
await nextFrame()
@@ -971,7 +959,6 @@ describe('e2e: Transition', () => {
971959
// leave
972960
expect(await classWhenTransitionStart()).toStrictEqual([
973961
'test',
974-
'test-leave-active',
975962
'test-leave-from'
976963
])
977964
await nextFrame()
@@ -1060,7 +1047,6 @@ describe('e2e: Transition', () => {
10601047
// leave
10611048
expect(await classWhenTransitionStart()).toStrictEqual([
10621049
'test',
1063-
'test-leave-active',
10641050
'test-leave-from'
10651051
])
10661052
await nextFrame()
@@ -1127,7 +1113,6 @@ describe('e2e: Transition', () => {
11271113
// leave
11281114
expect(await classWhenTransitionStart()).toStrictEqual([
11291115
'test',
1130-
'v-leave-active',
11311116
'v-leave-from'
11321117
])
11331118
expect(onLeaveSpy).toBeCalledTimes(1)
@@ -1196,7 +1181,6 @@ describe('e2e: Transition', () => {
11961181
// leave
11971182
expect(await classWhenTransitionStart()).toStrictEqual([
11981183
'test',
1199-
'v-leave-active',
12001184
'v-leave-from'
12011185
])
12021186
await nextFrame()
@@ -1276,15 +1260,25 @@ describe('e2e: Transition', () => {
12761260

12771261
// leave
12781262
await classWhenTransitionStart()
1263+
// component one [before enter]
12791264
await nextFrame()
1265+
// component one [enter]
12801266
expect(await html('#container')).toBe(
12811267
'<div class="test v-leave-active v-leave-to">one</div>'
12821268
)
12831269
await transitionFinish()
1270+
// component one [finish]
1271+
// component two [before enter]
1272+
expect(await html('#container')).toBe(
1273+
'<div class="test v-enter-from">two</div>'
1274+
)
1275+
await nextFrame()
1276+
// component two [enter]
12841277
expect(await html('#container')).toBe(
12851278
'<div class="test v-enter-active v-enter-to">two</div>'
12861279
)
12871280
await transitionFinish()
1281+
// component two [finish]
12881282
expect(await html('#container')).toBe('<div class="test">two</div>')
12891283
},
12901284
E2E_TIMEOUT
@@ -1319,7 +1313,6 @@ describe('e2e: Transition', () => {
13191313
// leave
13201314
expect(await classWhenTransitionStart()).toStrictEqual([
13211315
'test',
1322-
'test-leave-active',
13231316
'test-leave-from'
13241317
])
13251318
await nextFrame()
@@ -1414,7 +1407,6 @@ describe('e2e: Transition', () => {
14141407
// leave
14151408
expect(await classWhenTransitionStart()).toStrictEqual([
14161409
'test',
1417-
'test-leave-active',
14181410
'test-leave-from'
14191411
])
14201412
expect(beforeLeaveSpy).toBeCalled()
@@ -1486,7 +1478,6 @@ describe('e2e: Transition', () => {
14861478
// leave
14871479
expect(await classWhenTransitionStart()).toStrictEqual([
14881480
'test',
1489-
'test-leave-active',
14901481
'test-leave-from'
14911482
])
14921483
await nextFrame()
@@ -1558,7 +1549,6 @@ describe('e2e: Transition', () => {
15581549
// leave
15591550
expect(await classWhenTransitionStart()).toStrictEqual([
15601551
'test',
1561-
'test-leave-active',
15621552
'test-leave-from'
15631553
])
15641554
await nextFrame()
@@ -1634,7 +1624,6 @@ describe('e2e: Transition', () => {
16341624
// leave
16351625
expect(await classWhenTransitionStart()).toStrictEqual([
16361626
'test',
1637-
'test-leave-active',
16381627
'test-leave-from'
16391628
])
16401629
await nextFrame()
@@ -1689,7 +1678,6 @@ describe('e2e: Transition', () => {
16891678
// leave
16901679
expect(await classWhenTransitionStart()).toStrictEqual([
16911680
'test',
1692-
'test-leave-active',
16931681
'test-leave-from'
16941682
])
16951683
await nextFrame()
@@ -1744,7 +1732,6 @@ describe('e2e: Transition', () => {
17441732
// leave
17451733
expect(await classWhenTransitionStart()).toStrictEqual([
17461734
'test',
1747-
'test-leave-active',
17481735
'test-leave-from'
17491736
])
17501737
await nextFrame()
@@ -1802,7 +1789,6 @@ describe('e2e: Transition', () => {
18021789
// leave
18031790
expect(await classWhenTransitionStart()).toStrictEqual([
18041791
'test',
1805-
'test-leave-active',
18061792
'test-leave-from'
18071793
])
18081794
await nextFrame()

‎packages/vue/__tests__/TransitionGroup.spec.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,9 @@ describe('e2e: TransitionGroup', () => {
106106
)
107107

108108
expect(await htmlWhenTransitionStart()).toBe(
109-
`<div class="test test-leave-active test-leave-from">a</div>` +
109+
`<div class="test test-leave-from">a</div>` +
110110
`<div class="test">b</div>` +
111-
`<div class="test test-leave-active test-leave-from">c</div>`
111+
`<div class="test test-leave-from">c</div>`
112112
)
113113
await nextFrame()
114114
expect(await html('#container')).toBe(
@@ -150,7 +150,7 @@ describe('e2e: TransitionGroup', () => {
150150
)
151151

152152
expect(await htmlWhenTransitionStart()).toBe(
153-
`<div class="test test-leave-active test-leave-from">a</div>` +
153+
`<div class="test test-leave-from">a</div>` +
154154
`<div class="test">b</div>` +
155155
`<div class="test">c</div>` +
156156
`<div class="test test-enter-from">d</div>`
@@ -278,14 +278,14 @@ describe('e2e: TransitionGroup', () => {
278278
`<div class="test group-enter-from">d</div>` +
279279
`<div class="test">b</div>` +
280280
`<div class="test group-move" style="">a</div>` +
281-
`<div class="test group-leave-active group-leave-from group-move" style="">c</div>`
281+
`<div class="test group-leave-from group-move" style="">c</div>`
282282
)
283283
await nextFrame()
284284
expect(await html('#container')).toBe(
285285
`<div class="test group-enter-active group-enter-to">d</div>` +
286286
`<div class="test">b</div>` +
287287
`<div class="test group-move" style="">a</div>` +
288-
`<div class="test group-leave-active group-move group-leave-to" style="">c</div>`
288+
`<div class="test group-move group-leave-active group-leave-to" style="">c</div>`
289289
)
290290
await transitionFinish(duration * 2)
291291
expect(await html('#container')).toBe(
@@ -461,7 +461,7 @@ describe('e2e: TransitionGroup', () => {
461461

462462
// enter + leave
463463
expect(await htmlWhenTransitionStart()).toBe(
464-
`<div class="test test-leave-active test-leave-from">a</div>` +
464+
`<div class="test test-leave-from">a</div>` +
465465
`<div class="test">b</div>` +
466466
`<div class="test">c</div>` +
467467
`<div class="test test-enter-from">d</div>`

0 commit comments

Comments
 (0)