Strange behaviour with interrupted crossfade transitions

[oreilles]

Similar to #3398
Here is a very basic setup to test for the crossfade transition:
https://svelte.dev/repl/7b633681d5a849968771c4fe9b7e7536?version=3.18.1

The duration is set to 2s so you have time to interrupt the transition by clicking a second time on the button.

On the first interruption, the transition is working as expected: the forward transition stops, and the backward transition starts where the forward transition stopped.

However, on second and following interruptions, the transition isn't smooth anymore. The crossfade fallback is called for the forward transition, and the backward transition doesn't start where the transition was stopped, but where it was stopped in the first interruption.

You will have to reload the script to observe the expected behaviour again.

[raythurnvoid]

@oreilles avoid interruptible animations with svelte, since svelte uses WAAPI it's very difficult to stop the animation and calculate the position at which the element should be at a specific animation progress.

Other libraries use js based animation so interruptible animation comes for free to them, however WAAPI is the best from the performance standpoint.

If you need interruptible animations, try use anime or motion.