Comment utiliser les transitions de groupe en Reactjs ?

Les transitions de groupe, aussi connues comme les animations de liste, sont des effets utilisés pour animer la liste d’éléments lors de leur ajout, mise à jour ou suppression.

React Transition Group est un package React qui permet d’implémenter facilement des transitions de base et avancées et des animations dans les applications React.

Ci-dessous, voici comment vous pouvez utiliser les transitions de groupe (Group Transitions) en React:

1. Installez `react-transition-group` dans votre projet en utilisant npm ou yarn.

\`\`\` npm install react-transition-group \`\`\` ou \`\`\` yarn add react-transition-group \`\`\`

1. Importez le composant `TransitionGroup` et `CSSTransition` de react- transition-group dans votre fichier.

\`\`\`javascript import { TransitionGroup, CSSTransition } from ‘react-transition-group’; \`\`\`

1. Enveloppez la liste d’éléments dans le composant `TransitionGroup`.

\`\`\`jsx {items.map((item) => ( //… ))} \`\`\`

1. Enveloppez chaque élément de la liste dans le composant `CSSTransition`.

\`\`\`jsx {items.map((item) => (

{item.name}

))} \`\`\`

1. `key` est un prop obligatoire que vous devez fournir pour que React puisse suivre chaque élément.

1. `timeout` est le nombre de millisecondes pour l’entrée et la sortie de transition. Dans cet exemple, les transitions d’entrée et de sortie prennent 500ms.

1. `classNames` est le préfixe des classes CSS que vous allez définir pour la transition.

1. Maintenant, vous pouvez définir les classes CSS pour votre transition dans votre fichier CSS. Par exemple:

\`\`\`css .item-enter { opacity: 0; } .item-enter-active { opacity: 1; transition: opacity 500ms ease-in; } .item-exit { opacity: 1; } .item-exit-active { opacity: 0; transition: opacity 500ms ease-in; } \`\`\`

Notez que `-enter` et `-exit` sont ajoutés à votre préfixe de classe fournie à `classNames`. Ils définissent l’état initial et final de la transition, respectivement.

`-enter-active` et `-exit-active` définissent l’état “actif” de la transition. Dans cet exemple, ils effectuent une transition d’opacité sur 500ms.

C’est ainsi que vous pouvez utiliser les transitions de groupe en React. Pour les situations plus complexes, vous voudrez peut-être utiliser le composant`Transition` de la bibliothèque react-transition-group qui offre plus de contrôle sur vos transitions.