Pages wait for animation to complete when using `transition` or `in/out`

[JustBarnt]

When applying either transition:|local or in:|local/out:|local it still waits for the animations to complete before advancing to a new page.

[JustBarnt]

I'm closing this. It turns out it had to do with out layers encapsulating the code. As soon as a refactored the HTML it transitions fine.

[CKylinMC]

Sorry to disturb you, I'm still struggling on this problem, do you have some hints or good practice to solve this problem?

My case:

App.svelte
  Routes goes here
  sub pages:
     | - PageA.svelte
     | - PageB.svelte

In this case if I have some components with out transitions in PageA or PageB, when navigating between them, the page not being disappeared until the transition animations end, even with |local.

[JustBarnt]

@CKylinMC My solution has always been that I will set the delay property on the new page to a time greater than the transition time on the exiting page.

ex:

PageA: Duration of 500ms PageB: Delay would be 510ms

And generally all my pages would have the same duration/delays. This same principal I follow for SvelteKit as well.

[JustBarnt]

@CKylinMC The other thing to keep in mind, at least from my experience is, do not specify the width/height on your pages themself, its creates some weird shift when applying the transitions. I have started creating a general "shell" div that has the width/height and I tend to just use flex/grid for the pages so it fits and is fluid.

[CKylinMC]

Thanks for your help! I'll try it.

But I still wonder what does |local actually do, I see someone says that should help (but not works for me).