Skip to content

Commit

Permalink
Revert "ensure leave transitions and enter transitions are triggered …
Browse files Browse the repository at this point in the history 
…in the same frame (fix #4510)"

This reverts commit 92ad0bd.
  • Loading branch information
@yyx990803
yyx990803 committed Dec 27, 2016
1 parent 0bb2d4e commit 02e2d99
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 109 deletions.
12 changes: 5 additions & 7 deletions examples/move-animations/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,17 @@
border: 1px solid #666;
box-sizing: border-box;
}
/* 1. define transition property, duration and easing */
.fade-move, .fade-enter-active, .fade-leave-active {
transition: all .5s cubic-bezier(.55,0,.1,1);
}
/* 2. define enter from / leave to state */
.fade-enter, .fade-leave-active {
.fade-enter {
opacity: 0;
transform: scaleY(0.01) translate(30px, 0);
transform: scaleY(0) translate(30px, 0);
}
/* 3. make leaving items position: absolute so that
remaining items can animate to desired positions */
.fade-leave, .fade-leave-active {
.fade-leave-active {
position: absolute;
opacity: 0;
transform: scaleY(0.01) translate(30px, 0);
}
</style>
<script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions src/platforms/web/runtime/modules/transition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,9 +112,9 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
beforeEnterHook && beforeEnterHook(el)
if (expectsCSS) {
addTransitionClass(el, startClass)
addTransitionClass(el, activeClass)
nextFrame(() => {
removeTransitionClass(el, startClass)
addTransitionClass(el, activeClass)
if (!cb.cancelled && !userWantsControl) {
whenTransitionEnds(el, type, cb)
}
Expand Down Expand Up @@ -206,9 +206,9 @@ export function leave (vnode: VNodeWithData, rm: Function) {
beforeLeave && beforeLeave(el)
if (expectsCSS) {
addTransitionClass(el, leaveClass)
addTransitionClass(el, leaveActiveClass)
nextFrame(() => {
removeTransitionClass(el, leaveClass)
addTransitionClass(el, leaveActiveClass)
if (!cb.cancelled && !userWantsControl) {
whenTransitionEnds(el, type, cb)
}
Expand Down
30 changes: 15 additions & 15 deletions test/unit/features/component/component-keep-alive.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ describe('Component keep-alive', () => {
vm.view = 'two'
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-leave">one</div><!---->'
'<div class="test test-leave test-leave-active">one</div><!---->'
)
assertHookCalls(one, [1, 1, 1, 1, 0])
assertHookCalls(two, [0, 0, 0, 0, 0])
Expand All @@ -295,7 +295,7 @@ describe('Component keep-alive', () => {
expect(vm.$el.innerHTML).toBe('<!---->')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-enter">two</div>'
'<div class="test test-enter test-enter-active">two</div>'
)
assertHookCalls(one, [1, 1, 1, 1, 0])
assertHookCalls(two, [1, 1, 1, 0, 0])
Expand All @@ -313,7 +313,7 @@ describe('Component keep-alive', () => {
vm.view = 'one'
}).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-leave">two</div><!---->'
'<div class="test test-leave test-leave-active">two</div><!---->'
)
assertHookCalls(one, [1, 1, 1, 1, 0])
assertHookCalls(two, [1, 1, 1, 1, 0])
Expand All @@ -325,7 +325,7 @@ describe('Component keep-alive', () => {
expect(vm.$el.innerHTML).toBe('<!---->')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-enter">one</div>'
'<div class="test test-enter test-enter-active">one</div>'
)
assertHookCalls(one, [1, 1, 2, 1, 0])
assertHookCalls(two, [1, 1, 1, 1, 0])
Expand Down Expand Up @@ -369,7 +369,7 @@ describe('Component keep-alive', () => {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test">one</div>' +
'<div class="test test-enter">two</div>'
'<div class="test test-enter test-enter-active">two</div>'
)
assertHookCalls(one, [1, 1, 1, 1, 0])
assertHookCalls(two, [1, 1, 1, 0, 0])
Expand All @@ -385,7 +385,7 @@ describe('Component keep-alive', () => {
)
}).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-leave">one</div>' +
'<div class="test test-leave test-leave-active">one</div>' +
'<div class="test">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
Expand All @@ -404,7 +404,7 @@ describe('Component keep-alive', () => {
}).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test">two</div>' +
'<div class="test test-enter">one</div>'
'<div class="test test-enter test-enter-active">one</div>'
)
assertHookCalls(one, [1, 1, 2, 1, 0])
assertHookCalls(two, [1, 1, 1, 1, 0])
Expand All @@ -420,7 +420,7 @@ describe('Component keep-alive', () => {
)
}).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-leave">two</div>' +
'<div class="test test-leave test-leave-active">two</div>' +
'<div class="test">one</div>'
)
}).thenWaitFor(nextFrame).then(() => {
Expand Down Expand Up @@ -460,7 +460,7 @@ describe('Component keep-alive', () => {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test">one</div>' +
'<div class="test test-enter">two</div>'
'<div class="test test-enter test-enter-active">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
Expand All @@ -476,7 +476,7 @@ describe('Component keep-alive', () => {
// 3. a new "one" is created and entering
expect(vm.$el.innerHTML).toBe(
'<div class="test">two</div>' +
'<div class="test test-enter">one</div>'
'<div class="test test-enter test-enter-active">one</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
Expand All @@ -490,7 +490,7 @@ describe('Component keep-alive', () => {
)
}).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-leave">two</div>' +
'<div class="test test-leave test-leave-active">two</div>' +
'<div class="test">one</div>'
)
}).thenWaitFor(nextFrame).then(() => {
Expand Down Expand Up @@ -527,8 +527,8 @@ describe('Component keep-alive', () => {
vm.view = 'bar'
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test v-leave">foo</div>' +
'<div class="test test-enter">bar</div>'
'<div class="test v-leave v-leave-active">foo</div>' +
'<div class="test test-enter test-enter-active">bar</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
Expand All @@ -542,8 +542,8 @@ describe('Component keep-alive', () => {
vm.view = 'foo'
}).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-leave">bar</div>' +
'<div class="test v-enter">foo</div>'
'<div class="test test-leave test-leave-active">bar</div>' +
'<div class="test v-enter v-enter-active">foo</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
Expand Down
35 changes: 13 additions & 22 deletions test/unit/features/transition/transition-group.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ if (!isIE9) {
expect(vm.$el.innerHTML).toBe(
`<span>` +
['a', 'b', 'c'].map(i => `<div class="test">${i}</div>`).join('') +
`<div class="test v-enter">d</div>` +
`<div class="test v-enter">e</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`<div class="test v-enter v-enter-active">e</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
Expand All @@ -70,9 +70,9 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
`<div class="test v-leave">a</div>` +
`<div class="test v-leave v-leave-active">a</div>` +
`<div class="test">b</div>` +
`<div class="test v-leave">c</div>` +
`<div class="test v-leave v-leave-active">c</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
Expand All @@ -98,10 +98,10 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
`<div class="test v-leave">a</div>` +
`<div class="test v-leave v-leave-active">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter">d</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
Expand All @@ -128,10 +128,10 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
`<div class="test v-leave">a</div>` +
`<div class="test v-leave v-leave-active">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter">d</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
Expand All @@ -157,7 +157,7 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
vm.items.map(i => `<div class="test v-enter">${i}</div>`).join('') +
vm.items.map(i => `<div class="test v-enter v-enter-active">${i}</div>`).join('') +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
Expand Down Expand Up @@ -216,19 +216,10 @@ if (!isIE9) {
`<div class="test">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter">d</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`</span>`
)
expect(beforeEnterSpy.calls.count()).toBe(1)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
`<div class="test">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter-active">d</div>` +
`</span>`
)
}).thenWaitFor(_next => { next = _next }).then(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
Expand Down Expand Up @@ -270,10 +261,10 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
`<span>` +
`<div class="test group-enter">d</div>` +
`<div class="test group-enter group-enter-active">d</div>` +
`<div class="test">b</div>` +
`<div class="test group-move">a</div>` +
`<div class="test group-leave group-move">c</div>` +
`<div class="test group-leave group-leave-active group-move">c</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
Expand All @@ -282,7 +273,7 @@ if (!isIE9) {
`<div class="test group-enter-active">d</div>` +
`<div class="test">b</div>` +
`<div class="test group-move">a</div>` +
`<div class="test group-move group-leave-active">c</div>` +
`<div class="test group-leave-active group-move">c</div>` +
`</span>`
)
}).thenWaitFor(duration * 2).then(() => {
Expand Down
Loading

0 comments on commit 02e2d99

Please sign in to comment.