From 0bb2d4e2b621950f5d44ed83b7e9ce15e282db68 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 27 Dec 2016 14:11:40 -0500 Subject: [PATCH] Revert "fix enter transition flicker regression (fix #4576)" This reverts commit 89987e8e2ce31c071ea937152dbf967b6213d4ad. --- .../web/runtime/modules/transition.js | 2 +- .../component/component-keep-alive.spec.js | 16 +++---- .../transition/transition-group.spec.js | 14 +++--- .../transition/transition-mode.spec.js | 18 ++++---- .../features/transition/transition.spec.js | 44 +++++++++---------- 5 files changed, 47 insertions(+), 47 deletions(-) diff --git a/src/platforms/web/runtime/modules/transition.js b/src/platforms/web/runtime/modules/transition.js index 45d9998ebb2..697bd6103e7 100644 --- a/src/platforms/web/runtime/modules/transition.js +++ b/src/platforms/web/runtime/modules/transition.js @@ -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) } diff --git a/test/unit/features/component/component-keep-alive.spec.js b/test/unit/features/component/component-keep-alive.spec.js index 71d6f3a7b8d..d3000eb2324 100644 --- a/test/unit/features/component/component-keep-alive.spec.js +++ b/test/unit/features/component/component-keep-alive.spec.js @@ -295,7 +295,7 @@ describe('Component keep-alive', () => { expect(vm.$el.innerHTML).toBe('') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( - '
two
' + '
two
' ) assertHookCalls(one, [1, 1, 1, 1, 0]) assertHookCalls(two, [1, 1, 1, 0, 0]) @@ -325,7 +325,7 @@ describe('Component keep-alive', () => { expect(vm.$el.innerHTML).toBe('') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( - '
one
' + '
one
' ) assertHookCalls(one, [1, 1, 2, 1, 0]) assertHookCalls(two, [1, 1, 1, 1, 0]) @@ -369,7 +369,7 @@ describe('Component keep-alive', () => { waitForUpdate(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) assertHookCalls(one, [1, 1, 1, 1, 0]) assertHookCalls(two, [1, 1, 1, 0, 0]) @@ -404,7 +404,7 @@ describe('Component keep-alive', () => { }).then(() => { expect(vm.$el.innerHTML).toBe( '
two
' + - '
one
' + '
one
' ) assertHookCalls(one, [1, 1, 2, 1, 0]) assertHookCalls(two, [1, 1, 1, 1, 0]) @@ -460,7 +460,7 @@ describe('Component keep-alive', () => { waitForUpdate(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -476,7 +476,7 @@ describe('Component keep-alive', () => { // 3. a new "one" is created and entering expect(vm.$el.innerHTML).toBe( '
two
' + - '
one
' + '
one
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -528,7 +528,7 @@ describe('Component keep-alive', () => { waitForUpdate(() => { expect(vm.$el.innerHTML).toBe( '
foo
' + - '
bar
' + '
bar
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -543,7 +543,7 @@ describe('Component keep-alive', () => { }).then(() => { expect(vm.$el.innerHTML).toBe( '
bar
' + - '
foo
' + '
foo
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( diff --git a/test/unit/features/transition/transition-group.spec.js b/test/unit/features/transition/transition-group.spec.js index 3759fad69b6..d72096f63e2 100644 --- a/test/unit/features/transition/transition-group.spec.js +++ b/test/unit/features/transition/transition-group.spec.js @@ -43,8 +43,8 @@ if (!isIE9) { expect(vm.$el.innerHTML).toBe( `` + ['a', 'b', 'c'].map(i => `
${i}
`).join('') + - `
d
` + - `
e
` + + `
d
` + + `
e
` + `` ) }).thenWaitFor(nextFrame).then(() => { @@ -101,7 +101,7 @@ if (!isIE9) { `
a
` + `
b
` + `
c
` + - `
d
` + + `
d
` + `` ) }).thenWaitFor(nextFrame).then(() => { @@ -131,7 +131,7 @@ if (!isIE9) { `
a
` + `
b
` + `
c
` + - `
d
` + + `
d
` + `` ) }).thenWaitFor(nextFrame).then(() => { @@ -157,7 +157,7 @@ if (!isIE9) { waitForUpdate(() => { expect(vm.$el.innerHTML).toBe( `` + - vm.items.map(i => `
${i}
`).join('') + + vm.items.map(i => `
${i}
`).join('') + `` ) }).thenWaitFor(nextFrame).then(() => { @@ -216,7 +216,7 @@ if (!isIE9) { `
a
` + `
b
` + `
c
` + - `
d
` + + `
d
` + `` ) expect(beforeEnterSpy.calls.count()).toBe(1) @@ -270,7 +270,7 @@ if (!isIE9) { waitForUpdate(() => { expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe( `` + - `
d
` + + `
d
` + `
b
` + `
a
` + `
c
` + diff --git a/test/unit/features/transition/transition-mode.spec.js b/test/unit/features/transition/transition-mode.spec.js index 3f609b43a60..36b7d58eb98 100644 --- a/test/unit/features/transition/transition-mode.spec.js +++ b/test/unit/features/transition/transition-mode.spec.js @@ -33,7 +33,7 @@ if (!isIE9) { waitForUpdate(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -78,7 +78,7 @@ if (!isIE9) { expect(vm.$el.innerHTML).toBe('') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( - '
two
' + '
two
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -126,7 +126,7 @@ if (!isIE9) { expect(vm.$el.innerHTML).toBe('') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( - '
two
' + '
two
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -161,7 +161,7 @@ if (!isIE9) { waitForUpdate(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -211,7 +211,7 @@ if (!isIE9) { waitForUpdate(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -227,7 +227,7 @@ if (!isIE9) { // 3. a new "one" is created and entering expect(vm.$el.innerHTML).toBe( '
two
' + - '
one
' + '
one
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -271,7 +271,7 @@ if (!isIE9) { waitForUpdate(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -315,7 +315,7 @@ if (!isIE9) { expect(vm.$el.innerHTML).toBe('') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( - '
two
' + '
two
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( @@ -349,7 +349,7 @@ if (!isIE9) { waitForUpdate(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toBe( diff --git a/test/unit/features/transition/transition.spec.js b/test/unit/features/transition/transition.spec.js index 5f1d723d587..02aaea5af20 100644 --- a/test/unit/features/transition/transition.spec.js +++ b/test/unit/features/transition/transition.spec.js @@ -30,7 +30,7 @@ if (!isIE9) { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') + expect(vm.$el.children[0].className).toBe('test v-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test v-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -55,7 +55,7 @@ if (!isIE9) { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -90,7 +90,7 @@ if (!isIE9) { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test hello hello-active') + expect(vm.$el.children[0].className).toBe('test hello') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test hello-active') }).thenWaitFor(duration + buffer).then(() => { @@ -125,7 +125,7 @@ if (!isIE9) { vm.ok = true vm.trans = 'changed' }).then(() => { - expect(vm.$el.children[0].className).toBe('test changed-enter changed-enter-active') + expect(vm.$el.children[0].className).toBe('test changed-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test changed-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -169,7 +169,7 @@ if (!isIE9) { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test hello hello-active') + expect(vm.$el.children[0].className).toBe('test hello') expect(enter).toHaveBeenCalled() }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test hello-active') @@ -243,7 +243,7 @@ if (!isIE9) { _el = vm.$el.children[0] expect(beforeEnterSpy).toHaveBeenCalledWith(_el) expect(onEnterSpy).toHaveBeenCalledWith(_el) - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(afterEnterSpy).not.toHaveBeenCalled() expect(vm.$el.children[0].className).toBe('test test-enter-active') @@ -328,7 +328,7 @@ if (!isIE9) { _el = vm.$el.children[0] expect(beforeEnterSpy).toHaveBeenCalledWith(_el) expect(onEnterSpy).toHaveBeenCalledWith(_el) - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(afterEnterSpy).not.toHaveBeenCalled() expect(vm.$el.children[0].className).toBe('test test-enter-active') @@ -369,7 +369,7 @@ if (!isIE9) { }).then(() => { vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -430,7 +430,7 @@ if (!isIE9) { vm.ok = true }).then(() => { expect(enterSpy).toHaveBeenCalled() - expect(vm.$el.innerHTML).toBe('
foo
') + expect(vm.$el.innerHTML).toBe('
foo
') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.innerHTML).toMatch(/foo<\/div>/) }).then(done) @@ -455,7 +455,7 @@ if (!isIE9) { expect(vm.$el.innerHTML).toBe('') vm.ok = true waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') }).thenWaitFor(duration / 2).then(() => { @@ -497,7 +497,7 @@ if (!isIE9) { }).then(() => { expect(spy).toHaveBeenCalled() expect(vm.$el.children.length).toBe(1) // should have removed leaving element - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -531,7 +531,7 @@ if (!isIE9) { vm.ok = true }).then(() => { expect(vm.$el.children[0].style.display).toBe('') - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -567,7 +567,7 @@ if (!isIE9) { vm.ok = true }).then(() => { expect(vm.$el.children[0].style.display).toBe('') - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -601,7 +601,7 @@ if (!isIE9) { vm.ok = true }).then(() => { expect(spy).toHaveBeenCalled() - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -632,7 +632,7 @@ if (!isIE9) { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active') + expect(vm.$el.children[0].className).toBe('test-anim-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test-anim-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -666,7 +666,7 @@ if (!isIE9) { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test test-anim-long-enter test-anim-long-enter-active') + expect(vm.$el.children[0].className).toBe('test test-anim-long-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active') }).thenWaitFor(duration + 5).then(() => { @@ -692,7 +692,7 @@ if (!isIE9) { }).$mount(el) waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active') + expect(vm.$el.children[0].className).toBe('test test-appear') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-appear-active') }).thenWaitFor(duration + buffer).then(() => { @@ -713,7 +713,7 @@ if (!isIE9) { }).$mount(el) waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -746,7 +746,7 @@ if (!isIE9) { expect(vm.$el.childNodes[0].textContent).toBe('') vm.ok = true }).then(() => { - expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter v-enter-active') + expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -786,7 +786,7 @@ if (!isIE9) { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') + expect(vm.$el.children[0].className).toBe('test v-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test v-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -824,7 +824,7 @@ if (!isIE9) { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') + expect(vm.$el.children[0].className).toBe('test v-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test v-enter-active') }).thenWaitFor(duration + buffer).then(() => { @@ -858,7 +858,7 @@ if (!isIE9) { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') + expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') }).thenWaitFor(duration + buffer).then(() => {