Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
forked fromvuejs/vue

Commit0cbc961

Browse files
committed
add new transition to-state classes
1 parent02e2d99 commit0cbc961

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
conststartClass=isAppear ?appearClass :enterClass
6870
constactiveClass=isAppear ?appearActiveClass :enterActiveClass
71+
consttoClass=isAppear ?appearToClass :enterToClass
6972
constbeforeEnterHook=isAppear ?(beforeAppear||beforeEnter) :beforeEnter
7073
constenterHook=isAppear ?(typeofappear==='function' ?appear :enter) :enter
7174
constafterEnterHook=isAppear ?(afterAppear||afterEnter) :afterEnter
@@ -80,6 +83,7 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
8083

8184
constcb=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>one</div><!---->'
292+
'<divx x-first x-last"> 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>two</div>'
304+
'<divx x-first x-last"> 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>two</div><!---->'
322+
'<divx x-first x-last"> 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>one</div>'
334+
'<divx x-first x-last"> 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>two</div>'
379+
'<divx x-first x-last"> 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>one</div>'+
393+
'<divx x-first x-last"> 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>one</div>'
414+
'<divx x-first x-last"> 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>two</div>'+
428+
'<divx x-first x-last"> 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>two</div>'
468+
'<divx x-first x-last"> 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>one</div>'
484+
'<divx x-first x-last"> 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>two</div>'+
498+
'<divx x-first x-last"> 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>foo</div>'+
536-
'<div>bar</div>'
535+
'<divx x-first x-last"> v-leave-to">foo</div>'+
536+
'<divx x-first x-last"> 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>bar</div>'+
551-
'<div>foo</div>'
550+
'<divx x-first x-last"> test-leave-to">bar</div>'+
551+
'<divx x-first x-last"> 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>d</div>`+
55-
`<div>e</div>`+
54+
`<divx x-first x-last"> v-enter-to">d</div>`+
55+
`<divx x-first x-last"> 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>a</div>`+
81+
`<divx x-first x-last"> v-leave-to">a</div>`+
8282
`<div class="test">b</div>`+
83-
`<div>c</div>`+
83+
`<divx x-first x-last"> 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>a</div>`+
110+
`<divx x-first x-last"> v-leave-to">a</div>`+
111111
`<div class="test">b</div>`+
112112
`<div class="test">c</div>`+
113-
`<div>d</div>`+
113+
`<divx x-first x-last"> 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>a</div>`+
140+
`<divx x-first x-last"> v-leave-to">a</div>`+
141141
`<div class="test">b</div>`+
142142
`<div class="test">c</div>`+
143-
`<div>d</div>`+
143+
`<divx x-first x-last"> 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>${i}</div>`).join('')+
166+
vm.items.map(i=>`<divx x-first x-last"> 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>d</div>`+
273+
`<divx x-first x-last"> group-enter-to">d</div>`+
274274
`<div class="test">b</div>`+
275275
`<div class="test group-move">a</div>`+
276-
`<div>c</div>`+
276+
`<divx x-first x-last"> group-leave-to">c</div>`+
277277
`</span>`
278278
)
279279
}).thenWaitFor(duration*2).then(()=>{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp