Animate breaks when used along with fly transition

[shreyas44]

Describe the bug
The flip animation and fly transition break when used together, not sure which one is causing the other to break however.

Logs
Console is clear

To Reproduce

REPL: https://svelte.dev/repl/46298c2514ef4215b06ddab7c7bc44e0?version=3.32.3

In the REPL, repeatedly click on next (fast) and this happens

Expected behavior
With regards to the above screenshot, it's supposed to look something like this

Information about your Svelte project:

• Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10): Chrome 88.0.4324.96

• Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc): MacOS 11.2.1

• Svelte version (Please check you can reproduce the issue with the latest release!): 3.32.3

• Whether your project uses Webpack or Rollup: Rollup

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

Annoying and breaks the page

Additional context
If required, I could share a more real world reproduction

[apriliandi246]

I think a simple solution to solve this problem just change the duration of transition and animate. I tried duration to 600ms or less than 600ms and it's work...

[shreyas44]

Yup, that works in this case.

However, if you go to https://shreyas44.vercel.app and scroll down to the My Projects section and keep clicking the next button, the same thing happens. And in that case the duration is set to 400ms.

[kindoflew]

I think fly has to have a significantly shorter duration than flip. When they are the same duration, there is a race condition somewhere and the animation isn't calling the function to remove the position: absolute that it uses to figure out where things are. If you inspect one of the stuck items and look in the actual console, you'll see it's temporary absolute position is never removed.

[shreyas44]

@kindoflew that does make sense.

One thing I forgot to mention is that, this problem doesn't occur when the transition is only set to in, similar to #3202. However, I'm guessing this is because the animate doesn't affect the element until it finishes it's in transition?

I tried a workaround where I use a shouldTransition state variable, and if it's set to true, render the element with the animate directive else without it. When the next/back button is clicked, this would first set shouldTransition to false resulting in rendering the element without the animate directive (only if it's in the edge card that will be removed from the DOM) and then set the shouldTransition to true, which results in only the fly transition and not flip animate acting on the card leaving the DOM. First problem with this is that it's very hacky. Second, the svelte compiler raises an error An element that uses the animate directive must be the immediate child of a keyed each block, because I use an if block inside the each block and I'm guessing this error is raised because it could cause errors at runtime?

[kindoflew]

Probably also related to #4732. The docs on animate do say that about being the immediate child, I'm assuming so Svelte can know specifically which items to move to new positions before animating. The solution for your portfolio might be to forgo using flip and instead use a carousel component like svelte-carousel or roll your own.

[twobitfool]

Seems to happen when using flip with any transition: scale, fade, fly, etc.

Demo (REPL)

Similar to #4910, and probably related to #4732

[pushkine]

Duplicate #4910

[pejalo]

I wonder if this is related to my StackOverflow post: how to animate:flip with in/out:fade?

REPL

[Blankeos]

Still having problems with this :(.

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

Edit: Just fixed it thanks to a solution here: #4910 (comment)

[dummdidumm]

Fixed in Svelte 5