Elements (components) with transition overlap each other in an each block using flip animation

[Fygo]

Issue: When an each block which has animation:flip set contains items which have transition:xyz set and this each block is updated (e.g. some items removed), the items may not get the correct position if the update occurs while the previous transitions are running.

REPL: https://svelte.dev/repl/324c3d19fe1b4648919af7b2eef7e4f3?version=3.22.3

Steps to reproduce: click the button quickly 2-3 times, (or change the input field's value while the list is animating).

Result: Some elements overlap each other, breaking the order.

[kuhlaid]

You likely need to use deferred transitions https://svelte.dev/tutorial/deferred-transitions.

[Fygo]

Any feedback on this?

Here is a simpler example: https://svelte.dev/repl/9a81a545111b475f86639dafcd8f35a5?version=3.24.1

Just double click the button.

Result: elements overlapping, flip animation not pushing down the 2nd element.

Edit: I changed the duration of the animations to 2 seconds, meaning it is not even necessary to click the button "that fast". The key is to click it the second time WHILE the first animations are running.

This is the result:

[mquandalle]

I'm encountering the same issue. Is anyone aware of a workaround?
It seems that we should disable transitions while performing the "flip" layout calculation?

Edit: Interestingly the issue only happen with the out transition. In my case removing the out and only keeping the in gives a good result, see the amended example from @Fygo https://svelte.dev/repl/76cdc13f5a5b462bba8d6a082edf367f?version=3.24.1

[mquandalle]

Possibly related to #5808.

[ForrestFire0]

This is still an issue. Any updates about this?

My workaround was to delay the animation until the previous one has fixed wherever it was buggy. I had a list that varied in size, and so when I decreased the list size and increased it too soon, I would get the overlap. I simply delayed the increase in list size until the animation had completed.

[HalfVoxel]

I'm also running into this bug. I have an animation, in and out directive on a node in a keyed each block.
When the list changes quickly, the last element (all others seem to work fine, I think) sometimes gets stuck with some style=position: absolute; transform: ... css that makes it stay in the wrong position.

[legowhales]

Same here, I made a workaround that I think is a bit better than delays (delays where not working for me , and are pretty random imo).

Here it is : https://svelte.dev/repl/63bb44e18284450388bad41fc0df7c6c?version=3.44.1

Another problem is how transitions work. There is no way to dynamically modify the behaviour in the outro, if the animation is called with transition:fly. I think this is because svelte is using the css function for all outros instead of calling the transition function again. So you need to have in:customFlyIn and out:customFlyOut.

In the mean time, I hope this helps.
Cheers!

[Blankeos]

@legowhales you're nuts, I know this is like 3 years after but thanks man!

It went from this:

To this:

I wonder why is not included in the default API for flip, fly?

Repro: https://svelte.dev/repl/4d641551906e4b82a893918bb43fd6d3?version=4.2.12