React. Cómo animar las transiciones entre rutas de React Router (II)

Aprende a crear animaciones dependientes del estado al navegar entre rutas empleando React Router

Image for post
Image for post
Photo by Jonas Thijs on Unsplash

😑 “Limitaciones” de React Transition Group

Una vez que un componente se ha montado, su animación de salida no puede cambiarse.

const AnimatedSwitch = withRouter(({ location }) => (
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="slide"
timeout={1000}
>
.slide-exit {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: translateX(0%);
}
.slide-exit-active {
transform: translateX(-100%);
}

ChildFactory al rescate

<TransitionGroup
childFactory={child => React.cloneElement(child, {
classNames: animationClassNames
})}

>

🌎 Añadiendo estado a las rutas de React Router

history.push({  pathname: routeGenerator(currentScreen + 1),  state: {previousScreen: currentScreen}});

🆒 Transiciones entre rutas dependiendo del estado

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Conclusiones

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store