From: Vadim Kruglov <49036220+quiteeasy@users.noreply.github.com>
Date: Mon, 22 Apr 2024 07:10:08 +0000 (+0700)
Subject: fix(transition): transition is breaking/flickering when enter is canceled (#10688)
X-Git-Tag: v3.4.24~9
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=65109a70f187473edae8cf4df11af3c33345e6f6;p=thirdparty%2Fvuejs%2Fcore.git

fix(transition): transition is breaking/flickering when enter is canceled (#10688)

Co-authored-by: Vadim Kruglov <vadim.kruglov@libertexgroup.com>
---

diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index cce247fe1a..71385926d7 100644
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/packages/runtime-dom/src/components/Transition.ts
@@ -239,9 +239,11 @@ export function resolveTransitionProps(
       if (__COMPAT__ && legacyClassEnabled && legacyLeaveFromClass) {
         addTransitionClass(el, legacyLeaveFromClass)
       }
+      // add *-leave-active class before reflow so in the case of a cancelled enter transition
+      // the css will not get the final state (#10677)
+      addTransitionClass(el, leaveActiveClass)
       // force reflow so *-leave-from classes immediately take effect (#2593)
       forceReflow()
-      addTransitionClass(el, leaveActiveClass)
       nextFrame(() => {
         if (!el._isLeaving) {
           // cancelled