Skip to content

Commit 0cbc961

Browse files
yyx990803yyx990803
committed
add new transition to-state classes
1 parent 02e2d99 commit 0cbc961

File tree

6 files changed

+107
-86
lines changed

6 files changed

+107
-86
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,13 @@ export const transitionProps = {
1515
type: String,
1616
enterClass: String,
1717
leaveClass: String,
18+
enterToClass: String,
19+
leaveToClass: String,
1820
enterActiveClass: String,
1921
leaveActiveClass: String,
2022
appearClass: String,
21-
appearActiveClass: String
23+
appearActiveClass: String,
24+
appearToClass: String
2225
}
2326

2427
// in case the child is also an abstract component, e.g. <keep-alive>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
3434
css,
3535
type,
3636
enterClass,
37+
enterToClass,
3738
enterActiveClass,
3839
appearClass,
40+
appearToClass,
3941
appearActiveClass,
4042
beforeEnter,
4143
enter,
@@ -66,6 +68,7 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
6668

6769
const startClass = isAppear ? appearClass : enterClass
6870
const activeClass = isAppear ? appearActiveClass : enterActiveClass
71+
const toClass = isAppear ? appearToClass : enterToClass
6972
const beforeEnterHook = isAppear ? (beforeAppear || beforeEnter) : beforeEnter
7073
const enterHook = isAppear ? (typeof appear === 'function' ? appear : enter) : enter
7174
const afterEnterHook = isAppear ? (afterAppear || afterEnter) : afterEnter
@@ -80,6 +83,7 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
8083

8184
const cb = el._enterCb = once(() => {
8285
if (expectsCSS) {
86+
removeTransitionClass(el, toClass)
8387
removeTransitionClass(el, activeClass)
8488
}
8589
if (cb.cancelled) {
@@ -114,6 +118,7 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
114118
addTransitionClass(el, startClass)
115119
addTransitionClass(el, activeClass)
116120
nextFrame(() => {
121+
addTransitionClass(el, toClass)
117122
removeTransitionClass(el, startClass)
118123
if (!cb.cancelled && !userWantsControl) {
119124
whenTransitionEnds(el, type, cb)
@@ -154,6 +159,7 @@ export function leave (vnode: VNodeWithData, rm: Function) {
154159
css,
155160
type,
156161
leaveClass,
162+
leaveToClass,
157163
leaveActiveClass,
158164
beforeLeave,
159165
leave,
@@ -174,6 +180,7 @@ export function leave (vnode: VNodeWithData, rm: Function) {
174180
el.parentNode._pending[vnode.key] = null
175181
}
176182
if (expectsCSS) {
183+
removeTransitionClass(el, leaveToClass)
177184
removeTransitionClass(el, leaveActiveClass)
178185
}
179186
if (cb.cancelled) {
@@ -208,6 +215,7 @@ export function leave (vnode: VNodeWithData, rm: Function) {
208215
addTransitionClass(el, leaveClass)
209216
addTransitionClass(el, leaveActiveClass)
210217
nextFrame(() => {
218+
addTransitionClass(el, leaveToClass)
211219
removeTransitionClass(el, leaveClass)
212220
if (!cb.cancelled && !userWantsControl) {
213221
whenTransitionEnds(el, type, cb)
@@ -243,6 +251,9 @@ const autoCssTransition: (name: string) => Object = cached(name => {
243251
enterClass: `${name}-enter`,
244252
leaveClass: `${name}-leave`,
245253
appearClass: `${name}-enter`,
254+
enterToClass: `${name}-enter-to`,
255+
leaveToClass: `${name}-leave-to`,
256+
appearToClass: `${name}-enter-to`,
246257
enterActiveClass: `${name}-enter-active`,
247258
leaveActiveClass: `${name}-leave-active`,
248259
appearActiveClass: `${name}-enter-active`

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@ describe('Component keep-alive', () => {
289289
assertHookCalls(two, [0, 0, 0, 0, 0])
290290
}).thenWaitFor(nextFrame).then(() => {
291291
expect(vm.$el.innerHTML).toBe(
292-
'<div class="test test-leave-active">one</div><!---->'
292+
'<div class="test test-leave-active test-leave-to">one</div><!---->'
293293
)
294294
}).thenWaitFor(_next => { next = _next }).then(() => {
295295
expect(vm.$el.innerHTML).toBe('<!---->')
@@ -301,7 +301,7 @@ describe('Component keep-alive', () => {
301301
assertHookCalls(two, [1, 1, 1, 0, 0])
302302
}).thenWaitFor(nextFrame).then(() => {
303303
expect(vm.$el.innerHTML).toBe(
304-
'<div class="test test-enter-active">two</div>'
304+
'<div class="test test-enter-active test-enter-to">two</div>'
305305
)
306306
}).thenWaitFor(duration + buffer).then(() => {
307307
expect(vm.$el.innerHTML).toBe(
@@ -319,7 +319,7 @@ describe('Component keep-alive', () => {
319319
assertHookCalls(two, [1, 1, 1, 1, 0])
320320
}).thenWaitFor(nextFrame).then(() => {
321321
expect(vm.$el.innerHTML).toBe(
322-
'<div class="test test-leave-active">two</div><!---->'
322+
'<div class="test test-leave-active test-leave-to">two</div><!---->'
323323
)
324324
}).thenWaitFor(_next => { next = _next }).then(() => {
325325
expect(vm.$el.innerHTML).toBe('<!---->')
@@ -331,7 +331,7 @@ describe('Component keep-alive', () => {
331331
assertHookCalls(two, [1, 1, 1, 1, 0])
332332
}).thenWaitFor(nextFrame).then(() => {
333333
expect(vm.$el.innerHTML).toBe(
334-
'<div class="test test-enter-active">one</div>'
334+
'<div class="test test-enter-active test-enter-to">one</div>'
335335
)
336336
}).thenWaitFor(duration + buffer).then(() => {
337337
expect(vm.$el.innerHTML).toBe(
@@ -376,7 +376,7 @@ describe('Component keep-alive', () => {
376376
}).thenWaitFor(nextFrame).then(() => {
377377
expect(vm.$el.innerHTML).toBe(
378378
'<div class="test">one</div>' +
379-
'<div class="test test-enter-active">two</div>'
379+
'<div class="test test-enter-active test-enter-to">two</div>'
380380
)
381381
}).thenWaitFor(_next => { next = _next }).then(() => {
382382
expect(vm.$el.innerHTML).toBe(
@@ -390,7 +390,7 @@ describe('Component keep-alive', () => {
390390
)
391391
}).thenWaitFor(nextFrame).then(() => {
392392
expect(vm.$el.innerHTML).toBe(
393-
'<div class="test test-leave-active">one</div>' +
393+
'<div class="test test-leave-active test-leave-to">one</div>' +
394394
'<div class="test">two</div>'
395395
)
396396
}).thenWaitFor(duration + buffer).then(() => {
@@ -411,7 +411,7 @@ describe('Component keep-alive', () => {
411411
}).thenWaitFor(nextFrame).then(() => {
412412
expect(vm.$el.innerHTML).toBe(
413413
'<div class="test">two</div>' +
414-
'<div class="test test-enter-active">one</div>'
414+
'<div class="test test-enter-active test-enter-to">one</div>'
415415
)
416416
}).thenWaitFor(_next => { next = _next }).then(() => {
417417
expect(vm.$el.innerHTML).toBe(
@@ -425,7 +425,7 @@ describe('Component keep-alive', () => {
425425
)
426426
}).thenWaitFor(nextFrame).then(() => {
427427
expect(vm.$el.innerHTML).toBe(
428-
'<div class="test test-leave-active">two</div>' +
428+
'<div class="test test-leave-active test-leave-to">two</div>' +
429429
'<div class="test">one</div>'
430430
)
431431
}).thenWaitFor(duration + buffer).then(() => {
@@ -465,7 +465,7 @@ describe('Component keep-alive', () => {
465465
}).thenWaitFor(nextFrame).then(() => {
466466
expect(vm.$el.innerHTML).toBe(
467467
'<div class="test">one</div>' +
468-
'<div class="test test-enter-active">two</div>'
468+
'<div class="test test-enter-active test-enter-to">two</div>'
469469
)
470470
// switch again before enter finishes,
471471
// this cancels both enter and leave.
@@ -481,7 +481,7 @@ describe('Component keep-alive', () => {
481481
}).thenWaitFor(nextFrame).then(() => {
482482
expect(vm.$el.innerHTML).toBe(
483483
'<div class="test">two</div>' +
484-
'<div class="test test-enter-active">one</div>'
484+
'<div class="test test-enter-active test-enter-to">one</div>'
485485
)
486486
}).thenWaitFor(_next => { next = _next }).then(() => {
487487
expect(vm.$el.innerHTML).toBe(
@@ -495,7 +495,7 @@ describe('Component keep-alive', () => {
495495
)
496496
}).thenWaitFor(nextFrame).then(() => {
497497
expect(vm.$el.innerHTML).toBe(
498-
'<div class="test test-leave-active">two</div>' +
498+
'<div class="test test-leave-active test-leave-to">two</div>' +
499499
'<div class="test">one</div>'
500500
)
501501
}).thenWaitFor(duration + buffer).then(() => {
@@ -532,8 +532,8 @@ describe('Component keep-alive', () => {
532532
)
533533
}).thenWaitFor(nextFrame).then(() => {
534534
expect(vm.$el.innerHTML).toBe(
535-
'<div class="test v-leave-active">foo</div>' +
536-
'<div class="test test-enter-active">bar</div>'
535+
'<div class="test v-leave-active v-leave-to">foo</div>' +
536+
'<div class="test test-enter-active test-enter-to">bar</div>'
537537
)
538538
}).thenWaitFor(duration + buffer).then(() => {
539539
expect(vm.$el.innerHTML).toBe(
@@ -547,8 +547,8 @@ describe('Component keep-alive', () => {
547547
)
548548
}).thenWaitFor(nextFrame).then(() => {
549549
expect(vm.$el.innerHTML).toBe(
550-
'<div class="test test-leave-active">bar</div>' +
551-
'<div class="test v-enter-active">foo</div>'
550+
'<div class="test test-leave-active test-leave-to">bar</div>' +
551+
'<div class="test v-enter-active v-enter-to">foo</div>'
552552
)
553553
}).thenWaitFor(duration + buffer).then(() => {
554554
expect(vm.$el.innerHTML).toBe(

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ if (!isIE9) {
5151
expect(vm.$el.innerHTML).toBe(
5252
`<span>` +
5353
['a', 'b', 'c'].map(i => `<div class="test">${i}</div>`).join('') +
54-
`<div class="test v-enter-active">d</div>` +
55-
`<div class="test v-enter-active">e</div>` +
54+
`<div class="test v-enter-active v-enter-to">d</div>` +
55+
`<div class="test v-enter-active v-enter-to">e</div>` +
5656
`</span>`
5757
)
5858
}).thenWaitFor(duration + buffer).then(() => {
@@ -78,9 +78,9 @@ if (!isIE9) {
7878
}).thenWaitFor(nextFrame).then(() => {
7979
expect(vm.$el.innerHTML).toBe(
8080
`<span>` +
81-
`<div class="test v-leave-active">a</div>` +
81+
`<div class="test v-leave-active v-leave-to">a</div>` +
8282
`<div class="test">b</div>` +
83-
`<div class="test v-leave-active">c</div>` +
83+
`<div class="test v-leave-active v-leave-to">c</div>` +
8484
`</span>`
8585
)
8686
}).thenWaitFor(duration + buffer).then(() => {
@@ -107,10 +107,10 @@ if (!isIE9) {
107107
}).thenWaitFor(nextFrame).then(() => {
108108
expect(vm.$el.innerHTML).toBe(
109109
`<span>` +
110-
`<div class="test v-leave-active">a</div>` +
110+
`<div class="test v-leave-active v-leave-to">a</div>` +
111111
`<div class="test">b</div>` +
112112
`<div class="test">c</div>` +
113-
`<div class="test v-enter-active">d</div>` +
113+
`<div class="test v-enter-active v-enter-to">d</div>` +
114114
`</span>`
115115
)
116116
}).thenWaitFor(duration + buffer).then(() => {
@@ -137,10 +137,10 @@ if (!isIE9) {
137137
}).thenWaitFor(nextFrame).then(() => {
138138
expect(vm.$el.innerHTML).toBe(
139139
`<span>` +
140-
`<div class="test v-leave-active">a</div>` +
140+
`<div class="test v-leave-active v-leave-to">a</div>` +
141141
`<div class="test">b</div>` +
142142
`<div class="test">c</div>` +
143-
`<div class="test v-enter-active">d</div>` +
143+
`<div class="test v-enter-active v-enter-to">d</div>` +
144144
`</span>`
145145
)
146146
}).thenWaitFor(duration + buffer).then(() => {
@@ -163,7 +163,7 @@ if (!isIE9) {
163163
}).thenWaitFor(nextFrame).then(() => {
164164
expect(vm.$el.innerHTML).toBe(
165165
`<span>` +
166-
vm.items.map(i => `<div class="test v-enter-active">${i}</div>`).join('') +
166+
vm.items.map(i => `<div class="test v-enter-active v-enter-to">${i}</div>`).join('') +
167167
`</span>`
168168
)
169169
}).thenWaitFor(duration + buffer).then(() => {
@@ -270,10 +270,10 @@ if (!isIE9) {
270270
}).thenWaitFor(nextFrame).then(() => {
271271
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
272272
`<span>` +
273-
`<div class="test group-enter-active">d</div>` +
273+
`<div class="test group-enter-active group-enter-to">d</div>` +
274274
`<div class="test">b</div>` +
275275
`<div class="test group-move">a</div>` +
276-
`<div class="test group-leave-active group-move">c</div>` +
276+
`<div class="test group-leave-active group-move group-leave-to">c</div>` +
277277
`</span>`
278278
)
279279
}).thenWaitFor(duration * 2).then(() => {

0 commit comments

Comments
 (0)