React.js #9: Añadir transiciones a las rutas con react-transition-group

En la entrada anterior de la serie sobre React.js, vimos cómo añadir rutas a nuestro proyecto con la librearía react-router. En esta entrada, vamos a añadir transiciones a esas rutas generadas en la entrada anterior para que al cambiar de ruta haga una animación.

Primero de todo, lo que vamos a hacer va a ser instalar el paquete que vamos a utilizar que es react-transition-group. Para instalarlo, ejecutamos el siguiente comando:

Una vez finalice, vamos al archivo dónde declaramos las rutas. En mi caso, es el archivo App.js. Importamos los componentes necesarios de la librería recientemente instalada y los usamos en el método render :

El componente <TransitionGroup> lo que hace es gestionar un conjunto de componentes de animación como <CSSTransition>  y monta y desmonta los componentes que toquen. El otro componente que estamos utilizando es <CSSTransition> y lo que hace es aplicarnos unas clases CSS según el estado en el que está la transición, las cuales nos permiten crear las transiciones. Los tres estados que existen son appear, enter and exit.

Como en el atributo classNames  del componente he puesto «fade», me generará las clases .fade-enter , .fade-appear , .fade-exit y después cada una de estas clases tendrá una clase con *-active y *-done .

Vamos a añadir las clases CSS al archivo de estilos:

La animación que he creado es una animación de desvanecimiento, es decir, que aparece y desaparece poco a poco. Pero se podría crear cualquier animación, una animación de slide hacia un lado, que se haga más grande y desaparezca, cualquier cosa.

Al aplicar todo esto el resultado debería ser el siguiente:

 

Código completo de la entrada: https://github.com/fullstackseriescom/aprende-reactjs/tree/master/09-react-router-transiciones

Ejemplo en vivo de la entrada: https://repl.it/@vreaxe/Reactjs-React-Router-Transiciones

-


Aloja tu proyecto en DigitalOcean: Obtén $200 de crédito gratis al registrarte a través de este enlace.

Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.

? CONTACTAR

Deja una respuesta

  Acepto la política de privacidad