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 49ed2d4d5f98ae9c7d19cc14845406bdfa281c59..217f4af9de7ccf3019a80f8165b44878d3ea8ae7 100644 (file)
--- 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 c3d2aa28ec44c69d340ab6ab5448212910536550..355ad61fe7a7c4cd828138aa259dcf74452c0c34 100644 (file)
--- 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>`