Revert "fix enter transition flicker regression (fix #4576)"

This reverts commit 89987e8.
vuejs · Dec 27, 2016 · 0bb2d4e · 0bb2d4e
1 parent 2540c37
commit 0bb2d4e
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 47 deletions.
diff --git 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
@@ -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 test-enter-active">two</div>'
+          '<div class="test test-enter">two</div>'
         )
         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(
-          '<div class="test test-enter test-enter-active">one</div>'
+          '<div class="test test-enter">one</div>'
         )
         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(
           '<div class="test">one</div>' +
-          '<div class="test test-enter test-enter-active">two</div>'
+          '<div class="test test-enter">two</div>'
         )
         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(
           '<div class="test">two</div>' +
-          '<div class="test test-enter test-enter-active">one</div>'
+          '<div class="test test-enter">one</div>'
         )
         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(
           '<div class="test">one</div>' +
-          '<div class="test test-enter test-enter-active">two</div>'
+          '<div class="test test-enter">two</div>'
         )
       }).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(
           '<div class="test">two</div>' +
-          '<div class="test test-enter test-enter-active">one</div>'
+          '<div class="test test-enter">one</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -528,7 +528,7 @@ describe('Component keep-alive', () => {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test v-leave">foo</div>' +
-          '<div class="test test-enter test-enter-active">bar</div>'
+          '<div class="test test-enter">bar</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -543,7 +543,7 @@ describe('Component keep-alive', () => {
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test test-leave">bar</div>' +
-          '<div class="test v-enter v-enter-active">foo</div>'
+          '<div class="test v-enter">foo</div>'
         )
       }).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
@@ -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 v-enter-active">d</div>` +
-            `<div class="test v-enter v-enter-active">e</div>` +
+            `<div class="test v-enter">d</div>` +
+            `<div class="test v-enter">e</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -101,7 +101,7 @@ if (!isIE9) {
             `<div class="test v-leave">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
-            `<div class="test v-enter v-enter-active">d</div>` +
+            `<div class="test v-enter">d</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -131,7 +131,7 @@ if (!isIE9) {
             `<div class="test v-leave">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
-            `<div class="test v-enter v-enter-active">d</div>` +
+            `<div class="test v-enter">d</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -157,7 +157,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            vm.items.map(i => `<div class="test v-enter v-enter-active">${i}</div>`).join('') +
+            vm.items.map(i => `<div class="test v-enter">${i}</div>`).join('') +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -216,7 +216,7 @@ if (!isIE9) {
             `<div class="test">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
-            `<div class="test v-enter v-enter-active">d</div>` +
+            `<div class="test v-enter">d</div>` +
           `</span>`
         )
         expect(beforeEnterSpy.calls.count()).toBe(1)
@@ -270,7 +270,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
           `<span>` +
-            `<div class="test group-enter group-enter-active">d</div>` +
+            `<div class="test group-enter">d</div>` +
             `<div class="test">b</div>` +
             `<div class="test group-move">a</div>` +
             `<div class="test group-leave group-move">c</div>` +

diff --git 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(
           '<div class="test v-leave">one</div>' +
-          '<div class="test v-enter v-enter-active">two</div>'
+          '<div class="test v-enter">two</div>'
         )
       }).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(
-          '<div class="test test-enter test-enter-active">two</div>'
+          '<div class="test test-enter">two</div>'
         )
       }).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(
-          '<div class="test test-enter test-enter-active">two</div>'
+          '<div class="test test-enter">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -161,7 +161,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">one</div>' +
-          '<div class="test test-enter test-enter-active">two</div>'
+          '<div class="test test-enter">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -211,7 +211,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">one</div>' +
-          '<div class="test test-enter test-enter-active">two</div>'
+          '<div class="test test-enter">two</div>'
         )
       }).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(
           '<div class="test">two</div>' +
-          '<div class="test test-enter test-enter-active">one</div>'
+          '<div class="test test-enter">one</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -271,7 +271,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test v-leave">one</div>' +
-          '<div class="test v-enter v-enter-active">two</div>'
+          '<div class="test v-enter">two</div>'
         )
       }).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(
-          '<div class="test test-enter test-enter-active">two</div>'
+          '<div class="test test-enter">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -349,7 +349,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">one</div>' +
-          '<div class="test test-enter test-enter-active">two</div>'
+          '<div class="test test-enter">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(