fix(transition): respect rules in *-leave-from transition class (#2597)

fix #2593

Author: luwuer

packages/runtime-dom/src/components/Transition.ts

@@ -27,6 +27,14 @@ export interface TransitionProps extends BaseTransitionProps<Element> {
   leaveToClass?: string
 }
 
+export interface ElementWithTransition extends HTMLElement {
+  // _vtc = Vue Transition Classes.
+  // Store the temporarily-added transition classes on the element
+  // so that we can avoid overwriting them if the element's class is patched
+  // during the transition.
+  _vtc?: Set<string>
+}
+
 // DOM Transition is a higher-order-component based on the platform-agnostic
 // base Transition component, with DOM-specific logic.
 export const Transition: FunctionalComponent<TransitionProps> = (
@@ -149,7 +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
+      ;(el as HTMLElement).style.transitionProperty = 'none'
       nextFrame(() => {
+        ;(el as HTMLElement).style.transitionProperty = cachedTransition
         removeTransitionClass(el, leaveFromClass)
         addTransitionClass(el, leaveToClass)
         if (!(onLeave && onLeave.length > 1)) {
@@ -206,14 +222,6 @@ function validateDuration(val: unknown) {
   }
 }
 
-export interface ElementWithTransition extends HTMLElement {
-  // _vtc = Vue Transition Classes.
-  // Store the temporarily-added transition classes on the element
-  // so that we can avoid overwriting them if the element's class is patched
-  // during the transition.
-  _vtc?: Set<string>
-}
-
 export function addTransitionClass(el: Element, cls: string) {
   cls.split(/\s+/).forEach(c => c && el.classList.add(c))
   ;(

packages/vue/__tests__/Transition.spec.ts

@@ -1305,9 +1305,10 @@ describe('e2e: Transition', () => {
         await classWhenTransitionStart()
         await nextFrame()
         expect(await html('#container')).toBe(
-          '<div class="test v-leave-active v-leave-to">one</div>'
+          '<div class="test v-leave-active v-leave-to" style="">one</div>'
         )
         await transitionFinish()
+        await nextFrame()
         expect(await html('#container')).toBe(
           '<div class="test v-enter-active v-enter-to">two</div>'
         )

packages/vue/__tests__/TransitionGroup.spec.ts

@@ -8,6 +8,7 @@ describe('e2e: TransitionGroup', () => {
 
   const duration = 50
   const buffer = 5
+  const transitionDisableProp = `style="transition-property: none;"`
 
   const htmlWhenTransitionStart = () =>
     page().evaluate(() => {
@@ -106,15 +107,15 @@ describe('e2e: TransitionGroup', () => {
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
-        `<div class="test test-leave-active test-leave-from">a</div>` +
+        `<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test test-leave-active test-leave-from">c</div>`
+          `<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>c</div>`
       )
       await nextFrame()
       expect(await html('#container')).toBe(
-        `<div class="test test-leave-active test-leave-to">a</div>` +
+        `<div class="test test-leave-active test-leave-to" style="">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test test-leave-active test-leave-to">c</div>`
+          `<div class="test test-leave-active test-leave-to" style="">c</div>`
       )
       await transitionFinish()
       expect(await html('#container')).toBe(`<div class="test">b</div>`)
@@ -150,14 +151,14 @@ describe('e2e: TransitionGroup', () => {
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
-        `<div class="test test-leave-active test-leave-from">a</div>` +
+        `<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-from">d</div>`
       )
       await nextFrame()
       expect(await html('#container')).toBe(
-        `<div class="test test-leave-active test-leave-to">a</div>` +
+        `<div class="test test-leave-active test-leave-to" style="">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-to">d</div>`
@@ -278,7 +279,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" style="">c</div>`
+          `<div class="test group-leave-active group-leave-from group-move" ${transitionDisableProp}>c</div>`
       )
       await nextFrame()
       expect(await html('#container')).toBe(
@@ -461,7 +462,7 @@ describe('e2e: TransitionGroup', () => {
 
       // enter + leave
       expect(await htmlWhenTransitionStart()).toBe(
-        `<div class="test test-leave-active test-leave-from">a</div>` +
+        `<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-from">d</div>`
@@ -474,7 +475,7 @@ describe('e2e: TransitionGroup', () => {
       expect(afterEnterSpy).not.toBeCalled()
       await nextFrame()
       expect(await html('#container')).toBe(
-        `<div class="test test-leave-active test-leave-to">a</div>` +
+        `<div class="test test-leave-active test-leave-to" style="">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-to">d</div>`