Forráskód Böngészése

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

Co-authored-by: Vadim Kruglov <vadim.kruglov@libertexgroup.com>
Vadim Kruglov 2 éve
szülő
commit
65109a70f1
1 módosított fájl, 3 hozzáadás és 1 törlés
  1. 3 1
      packages/runtime-dom/src/components/Transition.ts

+ 3 - 1
packages/runtime-dom/src/components/Transition.ts

@@ -239,9 +239,11 @@ export function resolveTransitionProps(
       if (__COMPAT__ && legacyClassEnabled && legacyLeaveFromClass) {
       if (__COMPAT__ && legacyClassEnabled && legacyLeaveFromClass) {
         addTransitionClass(el, 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)
       // force reflow so *-leave-from classes immediately take effect (#2593)
       forceReflow()
       forceReflow()
-      addTransitionClass(el, leaveActiveClass)
       nextFrame(() => {
       nextFrame(() => {
         if (!el._isLeaving) {
         if (!el._isLeaving) {
           // cancelled
           // cancelled