Les animations dans ReactJS

Introduction

L'animation est une fonctionnalité intéressante des applications web modernes. Elle donne une sensation rafraîchissante à l'application. La communauté React fournit plusieurs excellentes bibliothèques d'animation basées sur React, comme React Motion, React Reveal, react-animations, etc. React lui-même fournit une bibliothèque d'animation, React Transition Group, en tant qu'option supplémentaire. Il s'agit d'une bibliothèque indépendante qui améliore la version précédente de la bibliothèque. Nous allons apprendre la bibliothèque d'animation React Transition Group dans ce chapitre.

React Transition Group

La bibliothèque React Transition Group est une implémentation simple de l'animation. Elle ne fait pas d'animation à proprement parler. Au lieu de cela, elle expose les informations de base liées à l'animation. Chaque animation est fondamentalement la transition d'un élément d'un état à un autre. La bibliothèque expose le minimum d'états possibles pour chaque élément, comme indiqué ci-dessous.

• Entering
• Entered
• Exiting
• Exited

La bibliothèque offre des options permettant de définir un style CSS pour chaque état et d'animer l'élément en fonction de ce style lorsque l'élément passe d'un état à un autre. La bibliothèque fournit in props pour définir l'état actuel de l'élément. Si la valeur de in props est vraie, cela signifie que l'élément passe de l'état d'entrée à l'état de sortie. Si la valeur de in props est false, cela signifie que l'élément passe de l'état exiting à l'état exited.