I'm using an each block to iterate over an array of items, and an if block inside that to check which of the items should be shown, and a fly transition is applied to the inner items with a variable that controls the direction of the transition so that if the user hits next everything goes out to and comes in from <-- this way and if they hit previous button everything goes out to and comes in from --> this way.
It works great, with one exception. When the user is going in one direction and then they click the other direction the out animation for the currently shown item goes the wrong direction but only on the first out animation and then it falls in line. Here's a REPL of the issue: https://svelte.dev/repl/1aa3608458f84a4fb4d93b10b47ae3f1?version=3.25.0
Is there any way to make the first outro animation go the right way after a direction change? I feel like there's something I'm not seeing.
Edit:
There is a Github issue which seems somewhat related to this issue.
As I noted in the Github issue it seems that the behavior only affects items inside of an each block. This REPL shows the behavior working as expected with dynamic x directions.
I came up with this workaround where I move the transition to a parent element of the each block and duplicate it, then alternate which each block is shown.
I would love to find out if there is a better workaround since the duplication is painful. If not I'll just make it a component and hide it away in shame.
I believe the reason for this behavior is that you define ‘out’ function before you know the direction in which ‘out’ is going hence the wrong direction if you change direction.
You can define your own function for ‘out’ and it’s run when you select the direction and therefore you have the correct direction available in your own function.
I’m not sure is my explanation correct but here is working example:
const myOut=(el)=>{
return fly(el,{x:-x, duration:600})
}
And in div:
out:myOut|local