Dans Reactjs, vous pouvez gérer les transitions entre les routes en utilisant la bibliothèque React Router accompagnée de React Transition Group.
1. Installer les dépendances :
```
npm install react-router-dom react-transition-group
```
1. Créer différents composants pour différentes routes.
```
function Home() {
return
function About() { return
1. Utilisez `Switch` et `Route` de `react-router-dom` pour gérer les routes dans votre applicatif. Les transitions entre les différentes routes peuvent être gérées en utilisant `TransitionGroup` et `CSSTransition` de `react-transition-group`.
```
import { BrowserRouter as Router, Switch, Route, Link } from ‘react-router-dom’;
import { TransitionGroup, CSSTransition } from ‘react-transition-group’;
//…
```
1. Définir les classes CSS pour gérer les transitions. Vous pouvez faire ce que vous voulez ici, mais voici un exemple basique de fade-in et fade-out :
```
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 450ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 450ms;
}
```
Notez que le nom du className (“fade” dans cet exemple) passé à CSSTransition doit correspondre au nom de base des classes CSS que vous définissez.
Notez également que la durée de la transition CSS (450ms dans cet exemple) doit correspondre à la durée (timeout) passée à CSSTransition.
