ensure leave transitions and enter transitions are triggered in the s…

…ame frame (fix vuejs#4510)
usench · Dec 22, 2016 · 92ad0bd · 92ad0bd
1 parent dacd0cf
commit 92ad0bd
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 94 deletions.
diff --git a/examples/move-animations/index.html b/examples/move-animations/index.html
@@ -15,17 +15,19 @@
         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);
       }
-      .fade-enter {
+      /* 2. define enter from / leave to state */
+      .fade-enter, .fade-leave-active {
         opacity: 0;
-        transform: scaleY(0) translate(30px, 0);
+        transform: scaleY(0.01) translate(30px, 0);
       }
-      .fade-leave-active {
+      /* 3. make leaving items position: absolute so that
+            remaining items can animate to desired positions */
+      .fade-leave, .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>

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)
       }
@@ -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)
         }

diff --git a/test/unit/features/component/component-keep-alive.spec.js b/test/unit/features/component/component-keep-alive.spec.js
@@ -283,7 +283,7 @@ describe('Component keep-alive', () => {
       vm.view = 'two'
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave test-leave-active">one</div><!---->'
+          '<div class="test test-leave">one</div><!---->'
         )
         assertHookCalls(one, [1, 1, 1, 1, 0])
         assertHookCalls(two, [0, 0, 0, 0, 0])
@@ -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])
@@ -313,7 +313,7 @@ describe('Component keep-alive', () => {
         vm.view = 'one'
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave test-leave-active">two</div><!---->'
+          '<div class="test test-leave">two</div><!---->'
         )
         assertHookCalls(one, [1, 1, 1, 1, 0])
         assertHookCalls(two, [1, 1, 1, 1, 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])
@@ -385,7 +385,7 @@ describe('Component keep-alive', () => {
         )
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave test-leave-active">one</div>' +
+          '<div class="test test-leave">one</div>' +
           '<div class="test">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -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])
@@ -420,7 +420,7 @@ describe('Component keep-alive', () => {
         )
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave test-leave-active">two</div>' +
+          '<div class="test test-leave">two</div>' +
           '<div class="test">one</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -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(
@@ -490,7 +490,7 @@ describe('Component keep-alive', () => {
         )
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave test-leave-active">two</div>' +
+          '<div class="test test-leave">two</div>' +
           '<div class="test">one</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -527,8 +527,8 @@ describe('Component keep-alive', () => {
       vm.view = 'bar'
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test v-leave v-leave-active">foo</div>' +
-          '<div class="test test-enter test-enter-active">bar</div>'
+          '<div class="test v-leave">foo</div>' +
+          '<div class="test test-enter">bar</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -542,8 +542,8 @@ describe('Component keep-alive', () => {
         vm.view = 'foo'
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave test-leave-active">bar</div>' +
-          '<div class="test v-enter v-enter-active">foo</div>'
+          '<div class="test test-leave">bar</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(() => {
@@ -70,9 +70,9 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            `<div class="test v-leave v-leave-active">a</div>` +
+            `<div class="test v-leave">a</div>` +
             `<div class="test">b</div>` +
-            `<div class="test v-leave v-leave-active">c</div>` +
+            `<div class="test v-leave">c</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -98,10 +98,10 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            `<div class="test v-leave v-leave-active">a</div>` +
+            `<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(() => {
@@ -128,10 +128,10 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            `<div class="test v-leave v-leave-active">a</div>` +
+            `<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,10 +216,19 @@ 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)
+      }).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>` +
@@ -261,10 +270,10 @@ 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-leave-active group-move">c</div>` +
+            `<div class="test group-leave group-move">c</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -273,7 +282,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-leave-active group-move">c</div>` +
+            `<div class="test group-move group-leave-active">c</div>` +
           `</span>`
         )
       }).thenWaitFor(duration * 2).then(() => {