React : Sitepoint propose cinq approches pour corriger les animations de fermeture

Les animations de fermeture de boîte de dialogue sous React échouent parce que le rendu conditionnel supprime les nœuds du DOM de manière synchrone, empêchant ainsi les transitions CSS et JavaScript de s’exécuter.

Le problème fondamental réside dans le modèle de rendu conditionnel de React, qui supprime les nœuds du DOM de manière synchrone. Par conséquent, les transitions CSS et les animations JavaScript ciblant l’état de fermeture n’ont aucune chance de s’exécuter, le composant disparaissant instantanément dès que l’état d’ouverture devient faux.

Deux stratégies pour résoudre la suppression synchrone

Pour résoudre ce problème de suppression synchrone, il existe deux stratégies fondamentales : maintenir le nœud monté tout en le masquant visuellement, ou retarder le démontage pour laisser l’animation se dérouler. Sitepoint évalue cinq approches distinctes pour y parvenir, chacune présentant des compromis techniques précis en matière de poids et de complexité.

Cinq méthodes pour contourner les limites du rendu conditionnel

• Approche 1 : Un démontage manuel différé géré par l’état, qui sépare l’intention de rendu de la présence dans le DOM sans dépendance externe, au prix d’une certaine fragilité.
• Approche 2 : L’utilisation de Motion avec le composant AnimatePresence, idéal pour les applications utilisant déjà cette bibliothèque pour des animations complexes ou des transitions de page.
• Approche 3 : Le composant Radix UI Dialog, qui gère automatiquement les attributs de l’état de données et suspend le démontage pendant l’exécution de l’animation CSS.
• Approche 4 : L’utilisation conjointe des styles natifs via la propriété @starting-style et de l’API de transition de vue dans les navigateurs compatibles.
• Approche 5 : L’utilisation directe de l’API View Transitions pour des transitions fluides au sein du même document, supportée nativement sur les navigateurs récents.

Choisir selon le poids du bundle et le support des navigateurs

Les transitions de vue sur le même document sont prises en charge sur Chrome, Safari 18 et Firefox 144, et s’avèrent nouvellement disponibles depuis octobre 2025. En l’absence de support pour document.startViewTransition, le code bascule automatiquement vers un changement d’état instantané.

Synchroniser les lecteurs d’écran avec l’événement animationend

Les animations de sortie CSS restent purement visuelles, ce qui signifie que les lecteurs d’écran annonceront la boîte de dialogue comme fermée pendant que l’animation joue encore. Pour éviter ce décalage, il convient d’écouter l’événement animationend avant de déclencher la fermeture programmatique.