My Problem:

I want to controll the page transition behavior based on state. My state is the URL the user is coming from.

Examples:

A user coming from Component1 going to Component2 --> slide Component1 out and at the same time slide Component2 in. A user coming from Componen3 going to Component2 --> fade Component3 out and at the same time fade Component2 in.

The issue is that setting the transition dynamically makes the transition type change during the transition as it's not waiting for the transition to finish. Also, some transitions need exitBeforeEnter to be true to fade accordingly. The slide page transition on the other hand needs it to be turned off for a transition without a gap. Working with only one transition slide or fade works like a charm. You will find the logic for switching the page-transition-stye in Component1. If you want to see the transition working replace variantsFade with variantsSlide.

What I tried:

Using useContext to keep track of the BroserHistory --> prevRoute and currRoute And setting the variants based on state as soon as the URL changes.

What I'm looking for:

A solution to allow switching between slide transitions with exitBeforeEnter=false and fading transition with exitBeforeEnter=true based on state while route switching.

Sandbox-Link: https://codesandbox.io/s/different-page-transition-kkp81n?file=/components/Component1.tsx