DEV Community

loading...

Discussion on: Simple Page Transitions with SvelteKit

Collapse
tonborzenko profile image
Anton Borzenko • Edited

Thank you for great job. Is it possible to use import { page } from '$app/stores', how do you think? I tried to use $page.path as a key, but it has a bug in animation between components...

Collapse
evanwinter profile image
Evan Winter Author • Edited

What kind of bug? Is it changing to the next route before it finishes the "out" transition of the previous route?

If so... and I'm not sure I'll word this right... but essentially, I think the issue is that the $page.path variable is reactive and updates immediately when you navigate to the next route, irrespective of which render instance of the component it started with. With the approach shown in the post, we store a reference to the previous route that's scoped to the particular render instance, so PageTransition.svelte doesn't see a new key until after the first route has transitioned out (destroyed itself) – then, prior to transitioning back in (recreating itself), it loads the new key for the new route.