Rapidly toggling element with out: transition causes incorrect node removal

[kurmachu]

Describe the bug

When an element with a seperate in: and out: transition (or just an out: transition) is rapidly toggled in a short period (as in, hidden due to state-based {#if condition} being briefly false, and then shown due to being true), it is incorrectly removed from the document after the intro animation finishes. If there is no in:, the outro animation plays instead and the element is hidden, despite the {#if ...} being true.

I've run into this when attempting to handle Form Actions from SvelteKit, with something like {#if form?.error}. If the form is re-submitted this becomes undefined before quickly becoming a value, casing the issue on the element presenting the error.

Reproduction

A REPL which attempts to simulate the issue artificially using timeouts on state:
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1QwW7bMAz9FUIr0BhI6-3qOSoG7BN6m3ZwJDolIlOqRKcIDP37IDXYeusOgkTyPfG9t6mZPGY1_NoUTwuqQf2IUe2VXGMt8gW9oNqrHNZka2fMNlEUbdgILTEkgQ3mySEUmFNY4P6d00uaOJNQ4PuKrcejQIjIcIC7LJPgbp58xu674Tq-I84RrewqpjM89v928faF5kYuFTo6ukCWq8eDUcfJnk8prOwebPAhDZDQGQXEQxMWVmmPptnIGLW8UAbKIOF08jgdPYINLMgy9rHBxt7RRRveeprrRh6Pq0hgCGw92fNh23UHvd3cSFqxFF2rsX8H6k8ozXkp2vqQ8VNSlfRG7MLbY0Z5pgXDKru_IyMff62dsoev3f-yqvwb6VtnuBT9upI9--stoI_yov5Zo38Jq3dwxAGaoScwqt5GwQBGNVPOqFLjVHu1BEczoVNDS-p3-QOlBZh6eAIAAA==

Press "quickly toggle" twice to see the issue.
You can also remove in:fade to see how just an outro behaves.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22635
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 20.63 GB / 31.87 GB
  Binaries:
    Node: 22.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.8)
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.269

Severity

annoyance

[adiguba]

Hello,

It seems that the problem come from these lines :

svelte/packages/svelte/src/internal/client/dom/elements/transitions.js

Lines 345 to 351 in c73c683

	// create a dummy animation that lasts as long as the delay (but with whatever devtools
	// multiplier is in effect). in the common case that it is `0`, we keep it anyway so that
	// the CSS keyframes aren't created until the DOM is updated
	var animation = element.animate(keyframes, { duration: delay });
	animation.onfinish = () => {

=> The dummy animation with a delay of 0 instantly gets the 'finished' status.
But for some reason unknown to me, in this case the onfinish() handler may be executed after a cancel().

I managed to reproduce the scenario in this REPL : the onfinish() is called even if the animation is cancelled before !

Adding this line at the beginning of onfinish() seem to fix the bug :

		if (animation.playState === 'idle') return;

But I don't known if this is enough, neither how to create a test for this !

[adiguba]

Another solution could be to use a small but non-zeo delay, like out:fade={{delay:0.00001}}

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1SwU7kMAz9FSuLxIzE0uHabbtC4hO40T10EneISOOQuKBR1H_HCaNdbmzVqnb8nv1sJ6vZOkyqfcrKTwuqVt2HoG4Un0Nx0hs6RvETrVGXky7paAMPox_ZLoEiQ4Z5MggbzJEWuP7kNBwnnyxb8tcFWz6HDBTQQw9XiSfG3Ty5hPtfEpTwlfUpoOZdwexH3zX_avn8w86VvBVoZ-wbJD477Ed1nPTLKdLqzU9NjmILEc2owPq2CqOVq9HnbNBN5_Zwe5DnbttqF5ItDPxsE8jLdDo5nI4OQZNn9Nw1ocK6RmqKlRs7Fw2-O67M5IG8dla_9Hm374d86Y_jipK_eF3zCRy-odRZCEc7SvgtqUh6t97Q-21CfrQLSpu7v6GRv2YtJ9sNHPb_yyryL6Q7IYmq11Vqu_NlQF_lheGhLOOZVmfgiC3Uhn7DqMpf9tCKWZuSpWxlnHKfFjJ2tmhUWyf1Z_sAnYKTTYoCAAA=

[kurmachu]

Another solution could be to use a small but non-zeo delay, like out:fade={{delay:0.00001}}

Sadly this doesn't work entirely consistently.
It does help a lot though, so I'll use it as a temporary fix to continue developing; thank you!
_{Tested on Android with Chrome Beta 131.0.6778.2}

[adiguba]

Oh it's work on Firefox but not Chrome.
The latter seems to need a delay of 0.001 instead of 0.00001...