codexly-ui 0.13.5 → 0.13.6

package/fesm2022/codexly-ui.mjs

@@ -2788,6 +2788,15 @@ class ClxAnimateService {
             void element.offsetHeight;
         const animClass = `${PREFIX}${config.animation}`;
         const isInfinite = config.repeat === 'infinite';
+        // A fillMode: 'forwards' animation (an exit fade/slide, e.g. clx-toast's playExitAnimation)
+        // is almost always followed by the caller destroying the element on the same tick its promise
+        // resolves — stripping animClass in _cleanup right then would drop animation-fill-mode's hold
+        // on the last keyframe, snapping the element back to its static CSS state (opaque, in place)
+        // for one paintable frame before removal, which read as a flash/"ghost" re-appearance. Classes
+        // are only stripped for a non-forwards run; a forwards run keeps them and instead resets
+        // them at the START of runAnimation's own reflow-forced restart path above, so a persisted
+        // element that's re-animated later (e.g. clx-animate-directive on hover) still resets cleanly.
+        const keepClassesOnEnd = config.fillMode === 'forwards';
         element.style.setProperty('--clx-anim-duration', `${config.duration}ms`);
         element.style.setProperty('--clx-anim-delay', `${config.delay}ms`);
         element.style.setProperty('--clx-anim-repeat', isInfinite ? 'infinite' : String(config.repeat ?? 1));
@@ -2809,7 +2818,12 @@ class ClxAnimateService {
         return new Promise(resolve => {
             const handleEnd = (ev) => {
                 ev.stopPropagation();
-                this._cleanup(element, animClass);
+                if (keepClassesOnEnd) {
+                    this._cleanups.delete(element);
+                }
+                else {
+                    this._cleanup(element, animClass);
+                }
                 this._runningCount.update(c => Math.max(0, c - 1));
                 resolve();
             };