search

sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
76.98k stars 4k forks source link

Transitions not working properly in Svelte 5. #11615

Open DanniScript opened 2 weeks ago

DanniScript commented 2 weeks ago

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 commented 2 weeks ago

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

Svelte 5 Preview Website

kinglouie commented 2 weeks ago

I'll link this here https://github.com/sveltejs/kit/discussions/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.