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

Commit02e2d99

Browse files
committed
Revert "ensure leave transitions and enter transitions are triggered in the same frame (fixvuejs#4510)"
This reverts commit92ad0bd.
1 parent0bb2d4e commit02e2d99

File tree

6 files changed

+94
-109
lines changed

6 files changed

+94
-109
lines changed

‎examples/move-animations/index.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,17 @@
1515
border:1px solid#666;
1616
box-sizing: border-box;
1717
}
18-
/* 1. define transition property, duration and easing */
1918
.fade-move, .fade-enter-active, .fade-leave-active {
2019
transition: all.5scubic-bezier(.55,0,.1,1);
2120
}
22-
/* 2. define enter from / leave to state */
23-
.fade-enter, .fade-leave-active {
21+
.fade-enter {
2422
opacity:0;
25-
transform:scaleY(0.01)translate(30px,0);
23+
transform:scaleY(0)translate(30px,0);
2624
}
27-
/* 3. make leaving items position: absolute so that
28-
remaining items can animate to desired positions */
29-
.fade-leave, .fade-leave-active {
25+
.fade-leave-active {
3026
position: absolute;
27+
opacity:0;
28+
transform:scaleY(0.01)translate(30px,0);
3129
}
3230
</style>
3331
<scriptsrc="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,9 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
112112
beforeEnterHook&&beforeEnterHook(el)
113113
if(expectsCSS){
114114
addTransitionClass(el,startClass)
115+
addTransitionClass(el,activeClass)
115116
nextFrame(()=>{
116117
removeTransitionClass(el,startClass)
117-
addTransitionClass(el,activeClass)
118118
if(!cb.cancelled&&!userWantsControl){
119119
whenTransitionEnds(el,type,cb)
120120
}
@@ -206,9 +206,9 @@ export function leave (vnode: VNodeWithData, rm: Function) {
206206
beforeLeave&&beforeLeave(el)
207207
if(expectsCSS){
208208
addTransitionClass(el,leaveClass)
209+
addTransitionClass(el,leaveActiveClass)
209210
nextFrame(()=>{
210211
removeTransitionClass(el,leaveClass)
211-
addTransitionClass(el,leaveActiveClass)
212212
if(!cb.cancelled&&!userWantsControl){
213213
whenTransitionEnds(el,type,cb)
214214
}

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ describe('Component keep-alive', () => {
283283
vm.view='two'
284284
waitForUpdate(()=>{
285285
expect(vm.$el.innerHTML).toBe(
286-
'<div>one</div><!---->'
286+
'<divx x-first x-last"> test-leave-active">one</div><!---->'
287287
)
288288
assertHookCalls(one,[1,1,1,1,0])
289289
assertHookCalls(two,[0,0,0,0,0])
@@ -295,7 +295,7 @@ describe('Component keep-alive', () => {
295295
expect(vm.$el.innerHTML).toBe('<!---->')
296296
}).thenWaitFor(nextFrame).then(()=>{
297297
expect(vm.$el.innerHTML).toBe(
298-
'<div>two</div>'
298+
'<divx x-first x-last"> test-enter-active">two</div>'
299299
)
300300
assertHookCalls(one,[1,1,1,1,0])
301301
assertHookCalls(two,[1,1,1,0,0])
@@ -313,7 +313,7 @@ describe('Component keep-alive', () => {
313313
vm.view='one'
314314
}).then(()=>{
315315
expect(vm.$el.innerHTML).toBe(
316-
'<div>two</div><!---->'
316+
'<divx x-first x-last"> test-leave-active">two</div><!---->'
317317
)
318318
assertHookCalls(one,[1,1,1,1,0])
319319
assertHookCalls(two,[1,1,1,1,0])
@@ -325,7 +325,7 @@ describe('Component keep-alive', () => {
325325
expect(vm.$el.innerHTML).toBe('<!---->')
326326
}).thenWaitFor(nextFrame).then(()=>{
327327
expect(vm.$el.innerHTML).toBe(
328-
'<div>one</div>'
328+
'<divx x-first x-last"> test-enter-active">one</div>'
329329
)
330330
assertHookCalls(one,[1,1,2,1,0])
331331
assertHookCalls(two,[1,1,1,1,0])
@@ -369,7 +369,7 @@ describe('Component keep-alive', () => {
369369
waitForUpdate(()=>{
370370
expect(vm.$el.innerHTML).toBe(
371371
'<div class="test">one</div>'+
372-
'<div>two</div>'
372+
'<divx x-first x-last"> test-enter-active">two</div>'
373373
)
374374
assertHookCalls(one,[1,1,1,1,0])
375375
assertHookCalls(two,[1,1,1,0,0])
@@ -385,7 +385,7 @@ describe('Component keep-alive', () => {
385385
)
386386
}).then(()=>{
387387
expect(vm.$el.innerHTML).toBe(
388-
'<div>one</div>'+
388+
'<divx x-first x-last"> test-leave-active">one</div>'+
389389
'<div class="test">two</div>'
390390
)
391391
}).thenWaitFor(nextFrame).then(()=>{
@@ -404,7 +404,7 @@ describe('Component keep-alive', () => {
404404
}).then(()=>{
405405
expect(vm.$el.innerHTML).toBe(
406406
'<div class="test">two</div>'+
407-
'<div>one</div>'
407+
'<divx x-first x-last"> test-enter-active">one</div>'
408408
)
409409
assertHookCalls(one,[1,1,2,1,0])
410410
assertHookCalls(two,[1,1,1,1,0])
@@ -420,7 +420,7 @@ describe('Component keep-alive', () => {
420420
)
421421
}).then(()=>{
422422
expect(vm.$el.innerHTML).toBe(
423-
'<div>two</div>'+
423+
'<divx x-first x-last"> test-leave-active">two</div>'+
424424
'<div class="test">one</div>'
425425
)
426426
}).thenWaitFor(nextFrame).then(()=>{
@@ -460,7 +460,7 @@ describe('Component keep-alive', () => {
460460
waitForUpdate(()=>{
461461
expect(vm.$el.innerHTML).toBe(
462462
'<div class="test">one</div>'+
463-
'<div>two</div>'
463+
'<divx x-first x-last"> test-enter-active">two</div>'
464464
)
465465
}).thenWaitFor(nextFrame).then(()=>{
466466
expect(vm.$el.innerHTML).toBe(
@@ -476,7 +476,7 @@ describe('Component keep-alive', () => {
476476
// 3. a new "one" is created and entering
477477
expect(vm.$el.innerHTML).toBe(
478478
'<div class="test">two</div>'+
479-
'<div>one</div>'
479+
'<divx x-first x-last"> test-enter-active">one</div>'
480480
)
481481
}).thenWaitFor(nextFrame).then(()=>{
482482
expect(vm.$el.innerHTML).toBe(
@@ -490,7 +490,7 @@ describe('Component keep-alive', () => {
490490
)
491491
}).then(()=>{
492492
expect(vm.$el.innerHTML).toBe(
493-
'<div>two</div>'+
493+
'<divx x-first x-last"> test-leave-active">two</div>'+
494494
'<div class="test">one</div>'
495495
)
496496
}).thenWaitFor(nextFrame).then(()=>{
@@ -527,8 +527,8 @@ describe('Component keep-alive', () => {
527527
vm.view='bar'
528528
waitForUpdate(()=>{
529529
expect(vm.$el.innerHTML).toBe(
530-
'<div>foo</div>'+
531-
'<div>bar</div>'
530+
'<divx x-first x-last"> v-leave-active">foo</div>'+
531+
'<divx x-first x-last"> test-enter-active">bar</div>'
532532
)
533533
}).thenWaitFor(nextFrame).then(()=>{
534534
expect(vm.$el.innerHTML).toBe(
@@ -542,8 +542,8 @@ describe('Component keep-alive', () => {
542542
vm.view='foo'
543543
}).then(()=>{
544544
expect(vm.$el.innerHTML).toBe(
545-
'<div>bar</div>'+
546-
'<div>foo</div>'
545+
'<divx x-first x-last"> test-leave-active">bar</div>'+
546+
'<divx x-first x-last"> v-enter-active">foo</div>'
547547
)
548548
}).thenWaitFor(nextFrame).then(()=>{
549549
expect(vm.$el.innerHTML).toBe(

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

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ if (!isIE9) {
4343
expect(vm.$el.innerHTML).toBe(
4444
`<span>`+
4545
['a','b','c'].map(i=>`<div class="test">${i}</div>`).join('')+
46-
`<div>d</div>`+
47-
`<div>e</div>`+
46+
`<divx x-first x-last"> v-enter-active">d</div>`+
47+
`<divx x-first x-last"> v-enter-active">e</div>`+
4848
`</span>`
4949
)
5050
}).thenWaitFor(nextFrame).then(()=>{
@@ -70,9 +70,9 @@ if (!isIE9) {
7070
waitForUpdate(()=>{
7171
expect(vm.$el.innerHTML).toBe(
7272
`<span>`+
73-
`<div>a</div>`+
73+
`<divx x-first x-last"> v-leave-active">a</div>`+
7474
`<div class="test">b</div>`+
75-
`<div>c</div>`+
75+
`<divx x-first x-last"> v-leave-active">c</div>`+
7676
`</span>`
7777
)
7878
}).thenWaitFor(nextFrame).then(()=>{
@@ -98,10 +98,10 @@ if (!isIE9) {
9898
waitForUpdate(()=>{
9999
expect(vm.$el.innerHTML).toBe(
100100
`<span>`+
101-
`<div>a</div>`+
101+
`<divx x-first x-last"> v-leave-active">a</div>`+
102102
`<div class="test">b</div>`+
103103
`<div class="test">c</div>`+
104-
`<div>d</div>`+
104+
`<divx x-first x-last"> v-enter-active">d</div>`+
105105
`</span>`
106106
)
107107
}).thenWaitFor(nextFrame).then(()=>{
@@ -128,10 +128,10 @@ if (!isIE9) {
128128
waitForUpdate(()=>{
129129
expect(vm.$el.innerHTML).toBe(
130130
`<span>`+
131-
`<div>a</div>`+
131+
`<divx x-first x-last"> v-leave-active">a</div>`+
132132
`<div class="test">b</div>`+
133133
`<div class="test">c</div>`+
134-
`<div>d</div>`+
134+
`<divx x-first x-last"> v-enter-active">d</div>`+
135135
`</span>`
136136
)
137137
}).thenWaitFor(nextFrame).then(()=>{
@@ -157,7 +157,7 @@ if (!isIE9) {
157157
waitForUpdate(()=>{
158158
expect(vm.$el.innerHTML).toBe(
159159
`<span>`+
160-
vm.items.map(i=>`<div>${i}</div>`).join('')+
160+
vm.items.map(i=>`<divx x-first x-last"> v-enter-active">${i}</div>`).join('')+
161161
`</span>`
162162
)
163163
}).thenWaitFor(nextFrame).then(()=>{
@@ -216,19 +216,10 @@ if (!isIE9) {
216216
`<div class="test">a</div>`+
217217
`<div class="test">b</div>`+
218218
`<div class="test">c</div>`+
219-
`<div>d</div>`+
219+
`<divx x-first x-last"> v-enter-active">d</div>`+
220220
`</span>`
221221
)
222222
expect(beforeEnterSpy.calls.count()).toBe(1)
223-
}).thenWaitFor(nextFrame).then(()=>{
224-
expect(vm.$el.innerHTML).toBe(
225-
`<span>`+
226-
`<div class="test">a</div>`+
227-
`<div class="test">b</div>`+
228-
`<div class="test">c</div>`+
229-
`<div class="test v-enter-active">d</div>`+
230-
`</span>`
231-
)
232223
}).thenWaitFor(_next=>{next=_next}).then(()=>{
233224
expect(vm.$el.innerHTML).toBe(
234225
`<span>`+
@@ -270,10 +261,10 @@ if (!isIE9) {
270261
waitForUpdate(()=>{
271262
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g,'$1')).toBe(
272263
`<span>`+
273-
`<div>d</div>`+
264+
`<divx x-first x-last"> group-enter-active">d</div>`+
274265
`<div class="test">b</div>`+
275266
`<div class="test group-move">a</div>`+
276-
`<div>c</div>`+
267+
`<divx x-first x-last">leave-active group-move">c</div>`+
277268
`</span>`
278269
)
279270
}).thenWaitFor(nextFrame).then(()=>{
@@ -282,7 +273,7 @@ if (!isIE9) {
282273
`<div class="test group-enter-active">d</div>`+
283274
`<div class="test">b</div>`+
284275
`<div class="test group-move">a</div>`+
285-
`<divx x-first x-last">move group-leave-active">c</div>`+
276+
`<divx x-first x-last"> group-move">c</div>`+
286277
`</span>`
287278
)
288279
}).thenWaitFor(duration*2).then(()=>{

0 commit comments

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