From 9d5546ca631711d6a584b131d35a7b24b2a3d533 Mon Sep 17 00:00:00 2001
From: luwuer <html6@foxmail.com>
Date: Thu, 3 Dec 2020 20:42:17 +0800
Subject: [PATCH 1/2] fix(runtime-dom): ensure styles from *-leave-active can
 trigger transition on the first frame (#2712)

---
 packages/runtime-dom/src/components/Transition.ts |  7 ++++++-
 packages/vue/__tests__/TransitionGroup.spec.ts    | 11 +++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index 49ed2d4d5f9..746ebc8a972 100644
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/packages/runtime-dom/src/components/Transition.ts
@@ -163,7 +163,12 @@ export function resolveTransitionProps(
       // 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'
+      // ref #2712
+      // ensure styles from *-leave-active can trigger transition
+      // on the first frame when el has `transition` property itself.
+      requestAnimationFrame(() => {
+        ;(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 c3d2aa28ec4..355ad61fe7a 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>`

From d7ba84516774300797b7dba75745059bcd106880 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 3 Dec 2020 10:28:02 -0500
Subject: [PATCH 2/2] update comments

---
 packages/runtime-dom/src/components/Transition.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index 746ebc8a972..217f4af9de7 100644
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/packages/runtime-dom/src/components/Transition.ts
@@ -157,16 +157,15 @@ 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
-      // ref #2712
-      // ensure styles from *-leave-active can trigger transition
-      // on the first frame when el has `transition` property itself.
       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(() => {