Svelte5: Transitions break when state changes while it is still running. DOM does not reflect state properly.

[Alia5]

Describe the bug

If you have a transition on an element and the condition changes while the transition is still running,
then only the first state change triggers the transition, subsequent state changes are not triggering new transitions,
nor cancel the already running one.

This is especially bad if one is using forms with use:enhance in SvelteKit, as form-ActionData gets set to undefined on submit and applied afterward.
If the request was now faster than the transition, well... Your conditional elements may not get displayed anymore.

Reproduction

Svelte5 REPL (broken)

Svelte5 / SvelteKit form Example (Broken)

Svelte4 Repl (working as intended)

Instructions:

• Click the button
• See h1 slide in
• Click button again
  • h1 vanishes in Svelte5
  • h1 stays visible in Svelte4 (expected)

Logs

No response

System Info

System:
    OS: Linux 5.15 Arch Linux (WSL)
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 5.91 GB / 15.57 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.1.0 - ~/.nvm/versions/node/v22.1.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v22.1.0/bin/npm
    bun: 1.0.2 - ~/.bun/bin/bun
  Browsers:
    Chromium: 124.0.6367.155
  npmPackages:
    svelte: 5.0.0-next.123 => 5.0.0-next.123

Severity

blocking an upgrade