fix(runtime-dom): ensure styles from *-leave-active can trigger trans…

…ition on the first frame (vuejs#2712)
luwuer · Dec 3, 2020 · 9d5546c · 9d5546c
1 parent d067fb2
commit 9d5546c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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>`