How to wait for transition to finish before loading new page?

[goldentoaste]

See here for the problem: Sandbox

I have 2 pages, each with an element that has a transition fade. When navigating to a different page, the fade animation will start playing and the content the new pages loads right away, before the fade is done yet. Is there anyway I can wait for the transition to finish?

[NormandoHall]

Removing |local ?

[goldentoaste]

From what I have seen, adding or removing |local does not seem to make a difference, even though this post suggests that having |local would fix the issue: issue #6686.

I think the semantics with |local is that the transition only plays when the component itself is destroyed, and not play if its destroyed because parent is destroyed, ie, when navigating to a new page. So I think if working as intended, |local would prevent the transition animation from playing, but the new page still loads instantly, which is not ideal, but better than the current situation.

[goldentoaste]

I think I have a fix for this issue, but if there is a better or easier way to do this I would love to know.
Fix here

So the idea is to have a store to keep state if the current page needs to play outro, in a shared store. When a page change is triggered, cancel the nav, then trigger the nav again when outro is done playing. See comments in the code sandbox for details.

[ioucyf]

Does this work for you?

codesandbox.io link

[goldentoaste]

@ofeenee Yup, this works great, thanks!