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

Aprende a crear animaciones al navegar entre rutas empleando React Router

Animación básica con React Transition Group

yarn add react-transition-group
Image for post
Image for post
Image for post
Image for post
.modal-transition-enter {

}
.modal-transition-enter-active {

}
.modal-transition-exit {}.modal-transition-exit-active {}.modal-transition-appear {}.modal-transition-appear-active {}
Image for post
Image for post

Animando transiciones entre rutas de React Router

💡 React Transition Group

<TransitionGroup>
<CSSTransition key="first" ...>
<Item/>
</CSSTransition>
</TransitionGroup>
<TransitionGroup>
<CSSTransition key="second" ...>
<Item/>
</CSSTransition>
</TransitionGroup>
<TransitionGroup>   // saliendo
<CSSTransition key="first" ...>
<Item/>
</CSSTransition>
// entrando
<CSSTransition key="second" ...>
<Item/>
</CSSTransition>
</TransitionGroup>

💡 Conceptos básicos para animar React Router

<Switch>
<TransitionGroup>
<CSSTransition>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
...
</CSSTransition>
</TransitionGroup>
</Switch>
<TransitionGroup>
<CSSTransition>
<Switch>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
</TransitionGroup>
<TransitionGroup>  // saliendo
<CSSTransition>
<Switch>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
// entrando
<CSSTransition>
<Switch>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
</TransitionGroup>

🔛 Creando una transición básica en React Router

const AnimatedSwitch = withRouter(({ location }) => (
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="slide"
timeout={1000}
>
<Switch>
<Route path='/first' component={First} />
<Route path='/second' component={Second} />
</Switch>
</CSSTransition>
</TransitionGroup>
));
<TransitionGroup>  // saliendo
<CSSTransition>
// El Switch que sale está cogiendo el objeto location
// del contexto, por tanto
// location.path = '/first'

<Switch>
<Route path='/'><HomeComponent /></Route>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
// entrando
<CSSTransition>
// El Switch que entra también está cogiendo el objeto location
// del contexto, por tanto también
// location.path = '/first'

<Switch>
<Route path='/'><HomeComponent /></Route>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
</TransitionGroup>
const AnimatedSwitch = withRouter(({ location }) => (
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="slide"
timeout={1000}
>
<Switch location={location}>
<Route path='/first' component={First} />
<Route path='/second' component={Second} />
</Switch>
</CSSTransition>
</TransitionGroup>
));
<TransitionGroup>  // saliendo
<CSSTransition>
// El Switch que sale está cogiendo el objeto location
// procedente del HOC withRouter, el cual es inmutable y por
// tanto, location.path = '/'

<Switch>
<Route path='/'><HomeComponent /></Route>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
// entrando
<CSSTransition>
// El Switch que entra también está cogiendo el objeto location
// del HOC withRouter, que ahora contendrá la información
// actualizada con la ruta hacia la que nos dirigimos, es decir
// location.path = 'first'

<Switch>
<Route path='/'><HomeComponent /></Route>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
</TransitionGroup>

Conclusiones

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

Written by

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