From: luwuer <html6@foxmail.com>
Date: Thu, 3 Dec 2020 15:37:47 +0000 (+0800)
Subject: fix(transition): ensure styles from *-leave-active trigger transition (#2716)
X-Git-Tag: v3.0.5~47
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=3f8f9b67b3b54a7ae8405baf6d28be7ec074509d;p=thirdparty%2Fvuejs%2Fcore.git

fix(transition): ensure styles from *-leave-active trigger transition (#2716)

fix #2712
---

diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index 49ed2d4d5f..217f4af9de 100644
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/packages/runtime-dom/src/components/Transition.ts
@@ -157,13 +157,17 @@ export function resolveTransitionProps(
       const resolve = () => finishLeave(el, done)
       addTransitionClass(el, leaveActiveClass)
       addTransitionClass(el, leaveFromClass)
-      // ref #2531, #2593
-      // disabling the transition before nextFrame ensures styles from
-      // *-leave-from and *-enter-from classes are applied instantly before
-      // the transition starts. This is applied for enter transition as well
-      // so that it accounts for `visibility: hidden` cases.
+      
       const cachedTransition = (el as HTMLElement).style.transitionProperty
-      ;(el as HTMLElement).style.transitionProperty = 'none'
+      requestAnimationFrame(() => {
+        // ref #2531, #2593
+        // disabling the transition before nextFrame ensures styles from
+        // *-leave-from classes are applied instantly before the transition starts.
+        // ref #2712
+        // do this in an rAF to ensure styles from *-leave-active can trigger
+        // transition on the first frame when el has `transition` property itself.
+        ;(el as HTMLElement).style.transitionProperty = 'none'
+      })
       nextFrame(() => {
         ;(el as HTMLElement).style.transitionProperty = cachedTransition
         removeTransitionClass(el, leaveFromClass)
diff --git a/packages/vue/__tests__/TransitionGroup.spec.ts b/packages/vue/__tests__/TransitionGroup.spec.ts
index c3d2aa28ec..355ad61fe7 100644
--- a/packages/vue/__tests__/TransitionGroup.spec.ts
+++ b/packages/vue/__tests__/TransitionGroup.spec.ts
@@ -8,7 +8,6 @@ describe('e2e: TransitionGroup', () => {
 
   const duration = 50
   const buffer = 5
-  const transitionDisableProp = `style="transition-property: none;"`
 
   const htmlWhenTransitionStart = () =>
     page().evaluate(() => {
@@ -107,9 +106,9 @@ describe('e2e: TransitionGroup', () => {
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
-        `<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>a</div>` +
+        `<div class="test test-leave-active test-leave-from">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>c</div>`
+          `<div class="test test-leave-active test-leave-from">c</div>`
       )
       await nextFrame()
       expect(await html('#container')).toBe(
@@ -151,7 +150,7 @@ describe('e2e: TransitionGroup', () => {
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
-        `<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>a</div>` +
+        `<div class="test test-leave-active test-leave-from">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-from">d</div>`
@@ -279,7 +278,7 @@ describe('e2e: TransitionGroup', () => {
         `<div class="test group-enter-active group-enter-from">d</div>` +
           `<div class="test">b</div>` +
           `<div class="test group-move" style="">a</div>` +
-          `<div class="test group-leave-active group-leave-from group-move" ${transitionDisableProp}>c</div>`
+          `<div class="test group-leave-active group-leave-from group-move" style="">c</div>`
       )
       await nextFrame()
       expect(await html('#container')).toBe(
@@ -462,7 +461,7 @@ describe('e2e: TransitionGroup', () => {
 
       // enter + leave
       expect(await htmlWhenTransitionStart()).toBe(
-        `<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>a</div>` +
+        `<div class="test test-leave-active test-leave-from">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-from">d</div>`