From: Evan You <yyx990803@gmail.com>
Date: Thu, 12 May 2022 07:39:34 +0000 (+0800)
Subject: fix(transition): handle edge case of cancel leave before next frame
X-Git-Tag: v3.2.34-beta.1~40
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=59cf2958e7bae5f1e13953373fcdbb4ad988be6c;p=thirdparty%2Fvuejs%2Fcore.git

fix(transition): handle edge case of cancel leave before next frame

fix #4462
---

diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index 9e290ef228..f33d413675 100644
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/packages/runtime-dom/src/components/Transition.ts
@@ -174,7 +174,10 @@ export function resolveTransitionProps(
     done && done()
   }
 
+  let isLeaving = false
   const finishLeave = (el: Element, done?: () => void) => {
+    isLeaving = false
+    removeTransitionClass(el, leaveFromClass)
     removeTransitionClass(el, leaveToClass)
     removeTransitionClass(el, leaveActiveClass)
     done && done()
@@ -221,6 +224,7 @@ export function resolveTransitionProps(
     onEnter: makeEnterHook(false),
     onAppear: makeEnterHook(true),
     onLeave(el, done) {
+      isLeaving = true
       const resolve = () => finishLeave(el, done)
       addTransitionClass(el, leaveFromClass)
       if (__COMPAT__ && legacyClassEnabled) {
@@ -230,6 +234,10 @@ export function resolveTransitionProps(
       forceReflow()
       addTransitionClass(el, leaveActiveClass)
       nextFrame(() => {
+        if (!isLeaving) {
+          // cancelled
+          return
+        }
         removeTransitionClass(el, leaveFromClass)
         if (__COMPAT__ && legacyClassEnabled) {
           removeTransitionClass(el, legacyLeaveFromClass)