From 65109a70f187473edae8cf4df11af3c33345e6f6 Mon Sep 17 00:00:00 2001 From: Vadim Kruglov <49036220+quiteeasy@users.noreply.github.com> Date: Mon, 22 Apr 2024 14:10:08 +0700 Subject: [PATCH] fix(transition): transition is breaking/flickering when enter is canceled (#10688) Co-authored-by: Vadim Kruglov --- packages/runtime-dom/src/components/Transition.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts index cce247fe1ae..71385926d7b 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