Skip to content

Commit 7762bee

Browse files
luwueryyx990803
luwuer
authored and
yyx990803
committed
feat(runtime-dom): transition component effect on visibility (#2531)
1 parent eaf8a67 commit 7762bee

File tree

3 files changed

+18
-58
lines changed

3 files changed

+18
-58
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ export function resolveTransitionProps(
123123
const resolve = () => finishEnter(el, isAppear, done)
124124
hook && hook(el, resolve)
125125
nextFrame(() => {
126+
addTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass)
126127
removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass)
127128
addTransitionClass(el, isAppear ? appearToClass : enterToClass)
128129
if (!(hook && hook.length > 1)) {
@@ -135,12 +136,10 @@ export function resolveTransitionProps(
135136
return extend(baseProps, {
136137
onBeforeEnter(el) {
137138
onBeforeEnter && onBeforeEnter(el)
138-
addTransitionClass(el, enterActiveClass)
139139
addTransitionClass(el, enterFromClass)
140140
},
141141
onBeforeAppear(el) {
142142
onBeforeAppear && onBeforeAppear(el)
143-
addTransitionClass(el, appearActiveClass)
144143
addTransitionClass(el, appearFromClass)
145144
},
146145
onEnter: makeEnterHook(false),

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

Lines changed: 4 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ describe('e2e: Transition', () => {
7474
// enter
7575
expect(await classWhenTransitionStart()).toStrictEqual([
7676
'test',
77-
'v-enter-active',
7877
'v-enter-from'
7978
])
8079
await nextFrame()
@@ -130,7 +129,6 @@ describe('e2e: Transition', () => {
130129
// enter
131130
expect(await classWhenTransitionStart()).toStrictEqual([
132131
'test',
133-
'test-enter-active',
134132
'test-enter-from'
135133
])
136134
await nextFrame()
@@ -191,7 +189,6 @@ describe('e2e: Transition', () => {
191189
// enter
192190
expect(await classWhenTransitionStart()).toStrictEqual([
193191
'test',
194-
'hello-active',
195192
'hello-from'
196193
])
197194
await nextFrame()
@@ -253,7 +250,6 @@ describe('e2e: Transition', () => {
253250
})
254251
expect(await classWhenTransitionStart()).toStrictEqual([
255252
'test',
256-
'changed-enter-active',
257253
'changed-enter-from'
258254
])
259255
await nextFrame()
@@ -353,7 +349,6 @@ describe('e2e: Transition', () => {
353349
// enter
354350
expect(await classWhenTransitionStart()).toStrictEqual([
355351
'test',
356-
'test-enter-active',
357352
'test-enter-from'
358353
])
359354
expect(beforeEnterSpy).toBeCalled()
@@ -408,7 +403,6 @@ describe('e2e: Transition', () => {
408403
// enter
409404
expect(await classWhenTransitionStart()).toStrictEqual([
410405
'test',
411-
'test-enter-active',
412406
'test-enter-from'
413407
])
414408
await nextFrame()
@@ -464,11 +458,7 @@ describe('e2e: Transition', () => {
464458
})
465459
})
466460
// appear
467-
expect(appearClass).toStrictEqual([
468-
'test',
469-
'test-appear-active',
470-
'test-appear-from'
471-
])
461+
expect(appearClass).toStrictEqual(['test', 'test-appear-from'])
472462
await nextFrame()
473463
expect(await classList('.test')).toStrictEqual([
474464
'test',
@@ -496,7 +486,6 @@ describe('e2e: Transition', () => {
496486
// enter
497487
expect(await classWhenTransitionStart()).toStrictEqual([
498488
'test',
499-
'test-enter-active',
500489
'test-enter-from'
501490
])
502491
await nextFrame()
@@ -593,11 +582,7 @@ describe('e2e: Transition', () => {
593582
})
594583
})
595584
// appear
596-
expect(appearClass).toStrictEqual([
597-
'test',
598-
'test-appear-active',
599-
'test-appear-from'
600-
])
585+
expect(appearClass).toStrictEqual(['test', 'test-appear-from'])
601586
expect(beforeAppearSpy).toBeCalled()
602587
expect(onAppearSpy).toBeCalled()
603588
expect(afterAppearSpy).not.toBeCalled()
@@ -639,7 +624,6 @@ describe('e2e: Transition', () => {
639624
// enter
640625
expect(await classWhenTransitionStart()).toStrictEqual([
641626
'test',
642-
'test-enter-active',
643627
'test-enter-from'
644628
])
645629
expect(beforeEnterSpy).toBeCalled()
@@ -770,7 +754,6 @@ describe('e2e: Transition', () => {
770754

771755
// enter
772756
expect(await classWhenTransitionStart()).toStrictEqual([
773-
'noop-enter-active',
774757
'noop-enter-from'
775758
])
776759
await nextFrame()
@@ -817,7 +800,6 @@ describe('e2e: Transition', () => {
817800

818801
// enter
819802
expect(await classWhenTransitionStart()).toStrictEqual([
820-
'test-anim-enter-active',
821803
'test-anim-enter-from'
822804
])
823805
await nextFrame()
@@ -872,7 +854,6 @@ describe('e2e: Transition', () => {
872854

873855
// enter
874856
expect(await classWhenTransitionStart()).toStrictEqual([
875-
'test-anim-long-enter-active',
876857
'test-anim-long-enter-from'
877858
])
878859
await nextFrame()
@@ -947,7 +928,6 @@ describe('e2e: Transition', () => {
947928
// enter
948929
expect(await svgTransitionStart()).toStrictEqual([
949930
'test',
950-
'test-enter-active',
951931
'test-enter-from'
952932
])
953933
await nextFrame()
@@ -1006,7 +986,6 @@ describe('e2e: Transition', () => {
1006986
// enter
1007987
expect(await classWhenTransitionStart()).toStrictEqual([
1008988
'test',
1009-
'test-enter-active',
1010989
'test-enter-from'
1011990
])
1012991
await nextFrame()
@@ -1063,7 +1042,6 @@ describe('e2e: Transition', () => {
10631042
// enter
10641043
expect(await classWhenTransitionStart()).toStrictEqual([
10651044
'test',
1066-
'test-enter-active',
10671045
'test-enter-from'
10681046
])
10691047
await nextFrame()
@@ -1175,11 +1153,7 @@ describe('e2e: Transition', () => {
11751153
.querySelector('#container div')!
11761154
.className.split(/\s+/g)
11771155
})
1178-
expect(enterClass).toStrictEqual([
1179-
'test',
1180-
'v-enter-active',
1181-
'v-enter-from'
1182-
])
1156+
expect(enterClass).toStrictEqual(['test', 'v-enter-from'])
11831157
expect(onEnterSpy).toBeCalledTimes(2)
11841158
await nextFrame()
11851159
expect(await classList('.test')).toStrictEqual([
@@ -1237,7 +1211,6 @@ describe('e2e: Transition', () => {
12371211
// enter
12381212
expect(await classWhenTransitionStart()).toStrictEqual([
12391213
'test',
1240-
'v-enter-active',
12411214
'v-enter-from'
12421215
])
12431216
await nextFrame()
@@ -1361,7 +1334,6 @@ describe('e2e: Transition', () => {
13611334
// enter
13621335
expect(await classWhenTransitionStart()).toStrictEqual([
13631336
'test',
1364-
'test-enter-active',
13651337
'test-enter-from'
13661338
])
13671339
await nextFrame()
@@ -1462,7 +1434,6 @@ describe('e2e: Transition', () => {
14621434
// enter
14631435
expect(await classWhenTransitionStart()).toStrictEqual([
14641436
'test',
1465-
'test-enter-active',
14661437
'test-enter-from'
14671438
])
14681439
expect(beforeEnterSpy).toBeCalled()
@@ -1528,7 +1499,6 @@ describe('e2e: Transition', () => {
15281499
// cancel (enter)
15291500
expect(await classWhenTransitionStart()).toStrictEqual([
15301501
'test',
1531-
'test-enter-active',
15321502
'test-enter-from'
15331503
])
15341504
expect(onLeaveCancelledSpy).toBeCalled()
@@ -1575,11 +1545,7 @@ describe('e2e: Transition', () => {
15751545
})
15761546
})
15771547
// appear
1578-
expect(appearClass).toStrictEqual([
1579-
'test',
1580-
'test-appear-active',
1581-
'test-appear-from'
1582-
])
1548+
expect(appearClass).toStrictEqual(['test', 'test-appear-from'])
15831549
await nextFrame()
15841550
expect(await classList('.test')).toStrictEqual([
15851551
'test',
@@ -1607,7 +1573,6 @@ describe('e2e: Transition', () => {
16071573
// enter
16081574
expect(await classWhenTransitionStart()).toStrictEqual([
16091575
'test',
1610-
'test-enter-active',
16111576
'test-enter-from'
16121577
])
16131578
await nextFrame()
@@ -1684,7 +1649,6 @@ describe('e2e: Transition', () => {
16841649
// enter
16851650
expect(await classWhenTransitionStart()).toStrictEqual([
16861651
'test',
1687-
'test-enter-active',
16881652
'test-enter-from'
16891653
])
16901654
await nextFrame()
@@ -1740,7 +1704,6 @@ describe('e2e: Transition', () => {
17401704
// enter
17411705
expect(await classWhenTransitionStart()).toStrictEqual([
17421706
'test',
1743-
'test-enter-active',
17441707
'test-enter-from'
17451708
])
17461709
await nextFrame()
@@ -1796,7 +1759,6 @@ describe('e2e: Transition', () => {
17961759
// enter
17971760
expect(await classWhenTransitionStart()).toStrictEqual([
17981761
'test',
1799-
'test-enter-active',
18001762
'test-enter-from'
18011763
])
18021764
await nextFrame()
@@ -1855,7 +1817,6 @@ describe('e2e: Transition', () => {
18551817
// enter
18561818
expect(await classWhenTransitionStart()).toStrictEqual([
18571819
'test',
1858-
'test-enter-active',
18591820
'test-enter-from'
18601821
])
18611822
await nextFrame()

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ describe('e2e: TransitionGroup', () => {
5555
`<div class="test">a</div>` +
5656
`<div class="test">b</div>` +
5757
`<div class="test">c</div>` +
58-
`<div class="test test-enter-active test-enter-from">d</div>` +
59-
`<div class="test test-enter-active test-enter-from">e</div>`
58+
`<div class="test test-enter-from">d</div>` +
59+
`<div class="test test-enter-from">e</div>`
6060
)
6161
await nextFrame()
6262
expect(await html('#container')).toBe(
@@ -153,7 +153,7 @@ describe('e2e: TransitionGroup', () => {
153153
`<div class="test test-leave-active test-leave-from">a</div>` +
154154
`<div class="test">b</div>` +
155155
`<div class="test">c</div>` +
156-
`<div class="test test-enter-active test-enter-from">d</div>`
156+
`<div class="test test-enter-from">d</div>`
157157
)
158158
await nextFrame()
159159
expect(await html('#container')).toBe(
@@ -202,9 +202,9 @@ describe('e2e: TransitionGroup', () => {
202202
})
203203
// appear
204204
expect(appearHtml).toBe(
205-
`<div class="test test-appear-active test-appear-from">a</div>` +
206-
`<div class="test test-appear-active test-appear-from">b</div>` +
207-
`<div class="test test-appear-active test-appear-from">c</div>`
205+
`<div class="test test-appear-from">a</div>` +
206+
`<div class="test test-appear-from">b</div>` +
207+
`<div class="test test-appear-from">c</div>`
208208
)
209209
await nextFrame()
210210
expect(await html('#container')).toBe(
@@ -224,8 +224,8 @@ describe('e2e: TransitionGroup', () => {
224224
`<div class="test">a</div>` +
225225
`<div class="test">b</div>` +
226226
`<div class="test">c</div>` +
227-
`<div class="test test-enter-active test-enter-from">d</div>` +
228-
`<div class="test test-enter-active test-enter-from">e</div>`
227+
`<div class="test test-enter-from">d</div>` +
228+
`<div class="test test-enter-from">e</div>`
229229
)
230230
await nextFrame()
231231
expect(await html('#container')).toBe(
@@ -275,7 +275,7 @@ describe('e2e: TransitionGroup', () => {
275275
)
276276

277277
expect(await htmlWhenTransitionStart()).toBe(
278-
`<div class="test group-enter-active group-enter-from">d</div>` +
278+
`<div class="test group-enter-from">d</div>` +
279279
`<div class="test">b</div>` +
280280
`<div class="test group-move" style="">a</div>` +
281281
`<div class="test group-leave-active group-leave-from group-move" style="">c</div>`
@@ -440,9 +440,9 @@ describe('e2e: TransitionGroup', () => {
440440
expect(onAppearSpy).toBeCalled()
441441
expect(afterAppearSpy).not.toBeCalled()
442442
expect(appearHtml).toBe(
443-
`<div class="test test-appear-active test-appear-from">a</div>` +
444-
`<div class="test test-appear-active test-appear-from">b</div>` +
445-
`<div class="test test-appear-active test-appear-from">c</div>`
443+
`<div class="test test-appear-from">a</div>` +
444+
`<div class="test test-appear-from">b</div>` +
445+
`<div class="test test-appear-from">c</div>`
446446
)
447447
await nextFrame()
448448
expect(afterAppearSpy).not.toBeCalled()
@@ -464,7 +464,7 @@ describe('e2e: TransitionGroup', () => {
464464
`<div class="test test-leave-active test-leave-from">a</div>` +
465465
`<div class="test">b</div>` +
466466
`<div class="test">c</div>` +
467-
`<div class="test test-enter-active test-enter-from">d</div>`
467+
`<div class="test test-enter-from">d</div>`
468468
)
469469
expect(beforeLeaveSpy).toBeCalled()
470470
expect(onLeaveSpy).toBeCalled()

0 commit comments

Comments
 (0)