Alpine: x-for throws the discarded elements to end of list before transition

[hkan]

Example

https://codepen.io/hkanaktas/pen/ExVXGLy

Expected behavior

When one of the red lines are clicked, it should fade off then get removed.

Current behavior

When one of the red lines are clicked, it gets teleported to end of the list then fades off then gets removed.

Notes

To be clear I'm not expecting a fade-off then shrink-down behavior here. (Although some way to mimic Vue's <transition-group> functionality would be really nice.) The issue here is that items removed from their arrays are getting teleported to end of x-for list.

[SimoTod]

Because of the current implementation of x-for, the 2 features are not really compatible.
x-for process the new list adding/updating the elements, then it clears up the remaining ones which by that time have been moved to the end of the list.
Transition needs improvements, at the moment there's not a way to trigger an event when they finishes so it's not an easy effect to achieve.
Not sure if anyone has any good idea for this.

[muzafferdede]

a funky way of implementing it:
https://codepen.io/muzafferdede/pen/dyYRaJg

[scorsi]

@muzafferdede btw, you're solution isn't perfect because deleting multiple rows will delete the wrong one. You should use items.id instead of the array id which is obviously changed at every array manipulation. But you're solution is incredibly easy and works pretty well. 👏
Unfortunately it's a patch not a really good solution, using setTimeout is a terrible idea in certain circumstance (lot of deletions at the same time). Hope it will find a proper library fix.