Transitions not working properly in Svelte 5.

[DanniScript]

Describe the bug

I have a menu for navigating between pages. Inside each page, I have a transition. In Svelte 4, this is okay and working, but in Svelte 5, it doesn't work.

If we use the {#key $page.url.pathname } block as a solution in Svelte 4 works as expected, but if we navigate between subpath (navigating between settings in the example) in Svelte 5 looks like the animations runs globally. I tried to avoid this using transition:fly|local={ ... } but no difference.

Reproduction

Svelte 4 transitions (working): https://stackblitz.com/edit/stackblitz-starters-k3emwx
Svelte 5 transitions (not working): https://stackblitz.com/edit/stackblitz-starters-tzwvvo

Using {#key $page.url.pathname }
Svelte 4: https://stackblitz.com/edit/stackblitz-starters-ohxp9w
Svelte 5: https://stackblitz.com/edit/stackblitz-starters-331yde

Logs

No response

System Info

Yes

Severity

annoyance

[henriquekirchheck]

I experienced a similar problem, I recreated it in a simpler way to demonstrate:

Svelte 5 Preview Website

[kinglouie]

I'll link this here sveltejs/kit#11104 because I hope page transitions will get better support in svelte 5, the key approach unfortunately always has some timing issues, even in svelte 4.