Skip to content

Commit ebd8d5f

Browse files
yyx990803yyx990803
committed
fix transition active class application timing to avoid initial flash
1 parent 3fe127b commit ebd8d5f

File tree

4 files changed

+60
-64
lines changed

4 files changed

+60
-64
lines changed

‎src/platforms/web/runtime/modules/transition.js

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,11 @@ export function enter (vnode: VNodeWithData) {
9494
beforeEnterHook && beforeEnterHook(el)
9595
if (expectsCSS) {
9696
addTransitionClass(el, startClass)
97+
addTransitionClass(el, activeClass)
9798
nextFrame(() => {
9899
removeTransitionClass(el, startClass)
99-
if (!cb.cancelled) {
100-
addTransitionClass(el, activeClass)
101-
if (!userWantsControl) {
102-
whenTransitionEnds(el, cb)
103-
}
100+
if (!cb.cancelled && !userWantsControl) {
101+
whenTransitionEnds(el, cb)
104102
}
105103
})
106104
}
@@ -161,13 +159,11 @@ export function leave (vnode: VNodeWithData, rm: Function) {
161159
beforeLeave && beforeLeave(el)
162160
if (expectsCSS) {
163161
addTransitionClass(el, leaveClass)
162+
addTransitionClass(el, leaveActiveClass)
164163
nextFrame(() => {
165164
removeTransitionClass(el, leaveClass)
166-
if (!cb.cancelled) {
167-
addTransitionClass(el, leaveActiveClass)
168-
if (!userWantsControl) {
169-
whenTransitionEnds(el, cb)
170-
}
165+
if (!cb.cancelled && !userWantsControl) {
166+
whenTransitionEnds(el, cb)
171167
}
172168
})
173169
}

‎test/unit/features/component/component-keep-alive.spec.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ describe('Component keep-alive', () => {
107107
vm.view = 'two'
108108
waitForUpdate(() => {
109109
expect(vm.$el.innerHTML).toBe(
110-
'<div class="test test-leave">one</div>'
110+
'<div class="test test-leave test-leave-active">one</div>'
111111
)
112112
assertHookCalls(one, [1, 1, 1, 1, 0])
113113
assertHookCalls(two, [0, 0, 0, 0, 0])
@@ -119,7 +119,7 @@ describe('Component keep-alive', () => {
119119
expect(vm.$el.innerHTML).toBe('')
120120
}).thenWaitFor(nextFrame).then(() => {
121121
expect(vm.$el.innerHTML).toBe(
122-
'<div class="test test-enter">two</div>'
122+
'<div class="test test-enter test-enter-active">two</div>'
123123
)
124124
assertHookCalls(one, [1, 1, 1, 1, 0])
125125
assertHookCalls(two, [1, 1, 1, 0, 0])
@@ -137,7 +137,7 @@ describe('Component keep-alive', () => {
137137
vm.view = 'one'
138138
}).then(() => {
139139
expect(vm.$el.innerHTML).toBe(
140-
'<div class="test test-leave">two</div>'
140+
'<div class="test test-leave test-leave-active">two</div>'
141141
)
142142
assertHookCalls(one, [1, 1, 1, 1, 0])
143143
assertHookCalls(two, [1, 1, 1, 1, 0])
@@ -149,7 +149,7 @@ describe('Component keep-alive', () => {
149149
expect(vm.$el.innerHTML).toBe('')
150150
}).thenWaitFor(nextFrame).then(() => {
151151
expect(vm.$el.innerHTML).toBe(
152-
'<div class="test test-enter">one</div>'
152+
'<div class="test test-enter test-enter-active">one</div>'
153153
)
154154
assertHookCalls(one, [1, 1, 2, 1, 0])
155155
assertHookCalls(two, [1, 1, 1, 1, 0])
@@ -197,7 +197,7 @@ describe('Component keep-alive', () => {
197197
waitForUpdate(() => {
198198
expect(vm.$el.innerHTML).toBe(
199199
'<div class="test">one</div>' +
200-
'<div class="test test-enter">two</div>'
200+
'<div class="test test-enter test-enter-active">two</div>'
201201
)
202202
assertHookCalls(one, [1, 1, 1, 1, 0])
203203
assertHookCalls(two, [1, 1, 1, 0, 0])
@@ -213,7 +213,7 @@ describe('Component keep-alive', () => {
213213
)
214214
}).then(() => {
215215
expect(vm.$el.innerHTML).toBe(
216-
'<div class="test test-leave">one</div>' +
216+
'<div class="test test-leave test-leave-active">one</div>' +
217217
'<div class="test">two</div>'
218218
)
219219
}).thenWaitFor(nextFrame).then(() => {
@@ -232,7 +232,7 @@ describe('Component keep-alive', () => {
232232
}).then(() => {
233233
expect(vm.$el.innerHTML).toBe(
234234
'<div class="test">two</div>' +
235-
'<div class="test test-enter">one</div>'
235+
'<div class="test test-enter test-enter-active">one</div>'
236236
)
237237
assertHookCalls(one, [1, 1, 2, 1, 0])
238238
assertHookCalls(two, [1, 1, 1, 1, 0])
@@ -248,7 +248,7 @@ describe('Component keep-alive', () => {
248248
)
249249
}).then(() => {
250250
expect(vm.$el.innerHTML).toBe(
251-
'<div class="test test-leave">two</div>' +
251+
'<div class="test test-leave test-leave-active">two</div>' +
252252
'<div class="test">one</div>'
253253
)
254254
}).thenWaitFor(nextFrame).then(() => {

‎test/unit/features/transition/transition-mode.spec.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ if (!isIE9) {
3333
vm.view = 'two'
3434
waitForUpdate(() => {
3535
expect(vm.$el.innerHTML).toBe(
36-
'<div class="test v-enter">two</div>' +
37-
'<div class="test v-leave">one</div>'
36+
'<div class="test v-enter v-enter-active">two</div>' +
37+
'<div class="test v-leave v-leave-active">one</div>'
3838
)
3939
}).thenWaitFor(nextFrame).then(() => {
4040
expect(vm.$el.innerHTML).toBe(
@@ -73,7 +73,7 @@ if (!isIE9) {
7373
vm.view = 'two'
7474
waitForUpdate(() => {
7575
expect(vm.$el.innerHTML).toBe(
76-
'<div class="test test-leave">one</div>'
76+
'<div class="test test-leave test-leave-active">one</div>'
7777
)
7878
}).thenWaitFor(nextFrame).then(() => {
7979
expect(vm.$el.innerHTML).toBe(
@@ -83,7 +83,7 @@ if (!isIE9) {
8383
expect(vm.$el.innerHTML).toBe('')
8484
}).thenWaitFor(nextFrame).then(() => {
8585
expect(vm.$el.innerHTML).toBe(
86-
'<div class="test test-enter">two</div>'
86+
'<div class="test test-enter test-enter-active">two</div>'
8787
)
8888
}).thenWaitFor(nextFrame).then(() => {
8989
expect(vm.$el.innerHTML).toBe(
@@ -122,7 +122,7 @@ if (!isIE9) {
122122
waitForUpdate(() => {
123123
expect(vm.$el.innerHTML).toBe(
124124
'<div class="test">one</div>' +
125-
'<div class="test test-enter">two</div>'
125+
'<div class="test test-enter test-enter-active">two</div>'
126126
)
127127
}).thenWaitFor(nextFrame).then(() => {
128128
expect(vm.$el.innerHTML).toBe(
@@ -136,7 +136,7 @@ if (!isIE9) {
136136
)
137137
}).then(() => {
138138
expect(vm.$el.innerHTML).toBe(
139-
'<div class="test test-leave">one</div>' +
139+
'<div class="test test-leave test-leave-active">one</div>' +
140140
'<div class="test">two</div>'
141141
)
142142
}).thenWaitFor(nextFrame).then(() => {
@@ -166,8 +166,8 @@ if (!isIE9) {
166166
vm.view = 'two'
167167
waitForUpdate(() => {
168168
expect(vm.$el.innerHTML).toBe(
169-
'<div class="test v-enter">two</div>' +
170-
'<div class="test v-leave">one</div>'
169+
'<div class="test v-enter v-enter-active">two</div>' +
170+
'<div class="test v-leave v-leave-active">one</div>'
171171
)
172172
}).thenWaitFor(nextFrame).then(() => {
173173
expect(vm.$el.innerHTML).toBe(
@@ -205,7 +205,7 @@ if (!isIE9) {
205205
vm.view = 'two'
206206
waitForUpdate(() => {
207207
expect(vm.$el.innerHTML).toBe(
208-
'<div class="test test-leave">one</div>'
208+
'<div class="test test-leave test-leave-active">one</div>'
209209
)
210210
}).thenWaitFor(nextFrame).then(() => {
211211
expect(vm.$el.innerHTML).toBe(
@@ -215,7 +215,7 @@ if (!isIE9) {
215215
expect(vm.$el.innerHTML).toBe('')
216216
}).thenWaitFor(nextFrame).then(() => {
217217
expect(vm.$el.innerHTML).toBe(
218-
'<div class="test test-enter">two</div>'
218+
'<div class="test test-enter test-enter-active">two</div>'
219219
)
220220
}).thenWaitFor(nextFrame).then(() => {
221221
expect(vm.$el.innerHTML).toBe(
@@ -253,7 +253,7 @@ if (!isIE9) {
253253
waitForUpdate(() => {
254254
expect(vm.$el.innerHTML).toBe(
255255
'<div class="test">one</div>' +
256-
'<div class="test test-enter">two</div>'
256+
'<div class="test test-enter test-enter-active">two</div>'
257257
)
258258
}).thenWaitFor(nextFrame).then(() => {
259259
expect(vm.$el.innerHTML).toBe(
@@ -267,7 +267,7 @@ if (!isIE9) {
267267
)
268268
}).then(() => {
269269
expect(vm.$el.innerHTML).toBe(
270-
'<div class="test test-leave">one</div>' +
270+
'<div class="test test-leave test-leave-active">one</div>' +
271271
'<div class="test">two</div>'
272272
)
273273
}).thenWaitFor(nextFrame).then(() => {

0 commit comments

Comments
 (0)