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:
|
1 |
npm install react-transition-group --save |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import { CSSTransition, TransitionGroup } from "react-transition-group"; ... class App extends Component { render() { return ( <Router> <div> <Header /> <Route render={({ location }) => ( <TransitionGroup className="container"> <CSSTransition appear={true} key={location.key} timeout={{ enter: 400, exit: 200 }} classNames="fade" > <div className="inner"> <Switch key={location.key} location={location}> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route path="/post/:id" component={Post} /> <Route component={NotFound} /> </Switch> </div> </CSSTransition> </TransitionGroup> )} /> </div> </Router> ); } } ... |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.container { position: relative; height: 100%; } .inner { position: absolute; width: 100%; } .fade-enter, .fade-appear { opacity: 0; } .fade-enter.fade-enter-active, .fade-appear.fade-appear-active { opacity: 1; transition: opacity 400ms; } .fade-exit { opacity: 1; } .fade-exit.fade-exit-active { opacity: 0; transition: opacity 200ms; } |
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
-
- https://reacttraining.com/react-router/web/guides/quick-start
- https://tylermcginnis.com/react-router-animated-transitions/
- https://coursework.vschool.io/react-transitions-with-react-transition-group/
- https://css-tricks.com/animating-between-views-in-react/
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