Mi problema:

Quiero controlar el comportamiento de transición de la página según el estado. Mi estado es la URL de la que proviene el usuario.

Ejemplos:

Un usuario que viene del Component1 yendo al Component2 --> deslizar el Component1 hacia afuera y al mismo tiempo deslizar el Component2 hacia adentro. Un usuario que viene del Componen3 yendo al Component2 --> desaparecer el Component3 y al mismo tiempo deslizar el Component2 hacia adentro.

El problema es que configurar la transición dinámicamente hace que el tipo de transición cambie durante la transición, ya que no está esperando a que finalice la transición. Además, algunas transiciones necesitan que exitBeforeEnter sea verdadera para atenuarse en consecuencia. La transición de la página de diapositivas, por otro lado, necesita que se desactive para una transición sin espacios. Trabajar con una sola diapositiva de transición o fundido funciona de maravilla. Encontrará la lógica para cambiar el estilo de transición de página en Component1 . Si desea ver que la transición funcione, reemplace variantsFade con variantsSlide .

Lo que probé:

Usar useContext para realizar un seguimiento de BroserHistory --> prevRoute y currRoute Y configurar las variantes según el estado tan pronto como cambie la URL.

Lo que estoy buscando:

Una solución para permitir el cambio entre transiciones de diapositivas con exitBeforeEnter=false y transición de desvanecimiento con exitBeforeEnter=true según el estado durante el cambio de ruta.

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