Animations d’entrée et de sortie sans bibliothèque

Lorsque vous effectuez un rendu conditionnel avec {show && }, React retire l'élément du DOM dès que show devient faux. Il n'y a pas le temps de jouer une animation de sortie, car le nœud a déjà disparu.

Les animations d'entrée sont faciles ; les animations de sortie constituent le véritable défi.

La solution la plus simple consiste à ne jamais démonter l'élément. Conservez-le dans le rendu et animez opacity jusqu'à zéro, en ajoutant pointer-events: none lorsqu'il est masqué, puis ramenez-la à un lorsqu'il est affiché.

Vous obtenez ainsi des fondus fluides dans les deux directions, au prix du maintien de l'élément dans le DOM.

Pour effectuer un véritable démontage, modélisez une petite machine à états avec des phases telles que mounting, mounted, unmounting et unmounted. Vous ne retirez le nœud qu'une fois l'animation de sortie terminée.

L'état détermine quelles classes d'animation s'appliquent à chaque phase.

Vous pouvez encapsuler la machine dans un crochet personnalisé, souvent appelé useMount. Il reçoit la visibilité souhaitée et indique si l'élément doit se trouver dans le DOM, ainsi que sa phase actuelle.

Les composants restent clairs, car la logique de synchronisation se trouve dans le crochet réutilisable.

En reprenant les conventions courantes, vous appliquez enter puis enter-active lors du montage, et exit puis exit-active lors du retrait. La classe de base définit l'état initial et la classe active définit l'état final avec une transition.

Passer de l'une à l'autre à la bonne image produit l'animation.

Pour savoir quand une animation de sortie se termine, écoutez l'événement transitionend sur l'élément. Lorsqu'il se déclenche pour la sortie, faites passer l'état à unmounted et retirez le nœud.

Cela lie précisément le démontage à la fin de l'animation visuelle plutôt qu'à un délai approximatif.

Vous pouvez regrouper tout cela dans un composant Transition qui accepte une propriété in et des enfants. Il conserve les enfants montés pendant leur animation de sortie et applique les classes appropriées à chaque phase.

Les utilisateurs n'ont plus qu'à basculer in pour obtenir gratuitement des animations d'entrée et de sortie correctes.

Un détail subtil : vous devez laisser le navigateur effectuer le rendu de la classe initiale avant d'ajouter la classe active ; sinon, l'élément saute sans transition. Un requestAnimationFrame ou un recalcul forcé de la mise en page entre les deux garantit que la transition s'exécute réellement.

Cela garantit que le navigateur enregistre d'abord les valeurs initiales.

La bibliothèque react-transition-group fournit les composants Transition et CSSTransition, qui implémentent exactement ce modèle, notamment le cycle de vie des classes et le moment du démontage.

Votre version DIY reprend ses idées essentielles, ce qui rend la bibliothèque facile à comprendre une fois que vous en avez créé une vous-même.

Pour un simple fondu, l'approche qui conserve l'élément monté ou un petit crochet suffit largement et évite une dépendance. Pour de nombreuses transitions coordonnées, des listes avec ajout et suppression, ou une séquence complexe, une bibliothèque fait gagner du temps et évite les bugs liés aux cas limites.

Choisissez en fonction de la complexité d'animation dont votre application a réellement besoin.

Les animations de sortie exigent de conserver l'élément jusqu'à la fin de son animation, que ce soit en ne le démontant jamais, avec une machine à états associée à transitionend, ou au moyen d'une bibliothèque.

Comprendre les mécanismes vous permet de choisir l'approche la plus légère qui répond à vos besoins.

Vous avez appris pourquoi les animations de sortie sont difficiles, deux solutions — conserver l'élément monté et utiliser une machine à états de montage —, comment transitionend synchronise le démontage, et comment créer un composant Transition réutilisable.

Vous avez également vu quand choisir react-transition-group plutôt que DIY.