@vectoriox/iox-builder 1.4.17 → 1.4.18

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1097,6 +1097,16 @@ class InteractionEngineService {
             return;
         const cleanups = [];
         for (const ix of node.interactions) {
+            // For entrance-type triggers, freeze the target at the animation's
+            // starting frame immediately so it is never briefly visible before
+            // the trigger fires (avoids the flash-then-animate flicker).
+            if (ix.trigger === 'pageLoad' || ix.trigger === 'viewportEnter') {
+                for (const action of ix.actions) {
+                    const target = this.resolveTarget(node, action);
+                    if (target)
+                        this.applyPreState(target, action);
+                }
+            }
             const cleanup = this.attachInteraction(node, ix, ref.element);
             cleanups.push({ node, interaction: ix, cleanup });
         }
@@ -1111,11 +1121,14 @@ class InteractionEngineService {
             entry.cleanup();
         }
         this.attached.delete(node);
-        // Cancelling Web Animations removes fill:'forwards' committed styles,
-        // returning the element to its natural CSS state.
+        // Cancel Web Animations and strip any inline pre-state styles that
+        // were applied by applyPreState() so the element returns to its natural CSS state.
         const ref = this.overlayService.getNodeRef(node);
         if (ref) {
             ref.element.getAnimations().forEach(a => a.cancel());
+            ref.element.style.removeProperty('opacity');
+            ref.element.style.removeProperty('transform');
+            ref.element.style.removeProperty('visibility');
         }
     }
     /** Re-attach interactions after they have been edited in the panel. */
@@ -1234,13 +1247,34 @@ class InteractionEngineService {
         const { keyframes } = this.buildAnimation(action);
         if (!keyframes.length)
             return;
+        // 'both' = backwards (holds first keyframe during delay) + forwards (holds last keyframe after end).
+        // This eliminates any flicker during the delay period.
         element.animate(keyframes, {
             duration: action.duration,
             delay: action.delay,
             easing: action.easing,
-            fill: 'forwards',
+            fill: 'both',
         });
     }
+    /**
+     * Freeze an element at the animation's starting frame immediately, before any
+     * trigger fires. Without this, entrance animations (fadeIn, moveUp, …) show the
+     * element at its natural visible state for the time between mount and trigger —
+     * causing a visible-then-disappear-then-animate flicker.
+     *
+     * Only call this for triggers that will eventually animate the element in
+     * (pageLoad, viewportEnter). Click/hover triggers must NOT pre-hide the element
+     * because the element should remain normally visible until interacted with.
+     */
+    applyPreState(element, action) {
+        const { keyframes } = this.buildAnimation(action);
+        if (!keyframes.length)
+            return;
+        const first = keyframes[0];
+        for (const [prop, val] of Object.entries(first)) {
+            element.style[prop] = String(val);
+        }
+    }
     reverseAction(element, action) {
         const { keyframes } = this.buildAnimation(action);
         if (!keyframes.length)