Event bindings on animate directive

[Oreilles]

It would be nice to be able to bind events on the animate:* directive, much like the one that are available with the transition directive (introstart, introend, outrostart, outroend).

This feature would be useful in order to prevent other changes to the current component state while an animation is occuring, as a component update during an animation can make it glitch.

I think two events named animstart and animend would be appropriate.

In the meantime, is there a way to emulate this feature with what svelte already offers ?

[multics]

❤️Very much needed!

[dummdidumm]

Related to #6479 where the opposite is requested

[BlueGreenMagick]

+1

This is what I'm using to emulate this feature.

export function customAnimation(node: Element, ) {
  /* function body */
  return {
    delay, duration, easing, css,
    tick: (t, u) => {
      if (t === 0) {
        node.dispatchEvent(new CustomEvent("animationStart"));
      } else if (t === 1) {
        node.dispatchEvent(new CustomEvent("animationEnd"));
      }
    },
  };
}

[cpt-n3mo]

good day,

anyone have a solution for this..? as the above answer is not clear to me..

how can i use this with a flip animation..

kind regards

[jdgamble555]

I had to hack this. You can basically do what you want by doing a timeout on the duration (assuming your transition duration is 100):

setTImeout(() => {
  // whatever I want to do
}, 100);

J