Transitions CSS avec les changements d’état de React

Une transition CSS interpole progressivement une propriété entre deux valeurs au fil du temps au lieu de passer instantanément de l’une à l’autre. Vous la déclarez sur l’élément avec transition: property duration timing-function delay.

Dans React, vous n’animez généralement pas manuellement des valeurs intégrées. Vous basculez plutôt une classe ou un style à l’aide de l’état, et CSS gère les images intermédiaires à votre place.

Le modèle courant consiste à conserver une valeur booléenne dans useState et à remplacer une classe CSS lorsqu’elle change. Lorsque la classe change, la propriété ciblée reçoit une nouvelle valeur et CSS anime la différence.

Par exemple, isOpen détermine si l’élément possède la classe open, et la classe open définit une hauteur ou une transformation différente.

Une configuration typique est const [isVisible, setIsVisible] = useState(false). Un bouton appelle setIsVisible(v => !v) pour inverser sa valeur.

L’utilisation de la mise à jour fonctionnelle v => !v évite les états obsolètes lorsque plusieurs mises à jour sont mises en file d’attente, ce qui rend l’inversion fiable.

Vous construisez className dynamiquement : className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. La classe de base contient la déclaration de transition, tandis que les classes modificatrices contiennent les valeurs de début et de fin.

Conserver transition sur la classe de base toujours présente permet à l’animation de fonctionner dans les deux sens, à l’ouverture comme à la fermeture.

Vous pouvez animer plusieurs propriétés à la fois en les énumérant : transition: transform 300ms ease, opacity 300ms ease. Un effet de fondu et de glissement associe une modification de opacity à un translateY sur transform.

Animer les deux ensemble produit une entrée soignée, durant laquelle l’élément glisse vers le haut tout en apparaissant progressivement.

transition-delay retarde le début d’une transition. En attribuant des délais croissants aux éléments d’une liste, vous créez une cascade décalée dans laquelle chaque élément s’anime légèrement après le précédent.

Dans React, vous pouvez calculer le délai directement, par exemple style={{ transitionDelay: index * 50 + 'ms' }}.

La propriété display ne peut pas être animée, car elle n’a aucune valeur intermédiaire entre none et block. Lui appliquer une transition produit un changement instantané, et non un fondu.

Animez plutôt opacity pour obtenir le fondu visuel et activez ou désactivez pointer-events: none afin que l’élément masqué ignore les clics lorsqu’il est invisible.

La fonction de temporisation détermine comment la vitesse évolue pendant la durée. linear avance à vitesse constante, ease démarre et se termine lentement, et cubic-bezier(...) vous permet de définir une courbe entièrement personnalisée.

Les courbes personnalisées sont idéales pour obtenir un mouvement vif ou rebondissant, par exemple cubic-bezier(0.34, 1.56, 0.64, 1) pour un léger dépassement.

Vous pouvez stocker les durées dans des propriétés personnalisées CSS comme --speed: 300ms et les réutiliser : transition: opacity var(--speed) ease. Cela garantit une temporisation cohérente entre les composants.

React peut même définir la variable directement avec style={{ '--speed': '500ms' }}, ce qui permet aux propriétés de piloter la temporisation de l’animation.

Les navigateurs peuvent animer transform et opacity sur le compositeur GPU sans recalculer la mise en page ni repeindre. Animer des propriétés comme width, top ou margin impose un travail de mise en page à chaque image et peut provoquer des saccades.

Lorsque vous devez déplacer, redimensionner ou faire pivoter un élément, utilisez transform ; lorsque vous devez le faire apparaître ou disparaître progressivement, utilisez opacity.

Une transition fiable dans React associe un état booléen, une classe modificatrice conditionnelle et une classe de base qui déclare transition sur des propriétés adaptées au GPU. L’état fait basculer la classe et CSS se charge de l’animation.

Vos composants restent ainsi déclaratifs, tout en tirant parti du navigateur pour produire des mouvements fluides.

Évaluez votre compréhension des animations performantes.

Vous avez appris à déclencher des transitions CSS en basculant des classes pilotées par l’état, à animer ensemble la transformation et l’opacité, à créer des décalages avec des délais et à éviter d’animer display en utilisant l’opacité avec pointer-events.

Vous avez également découvert les fonctions de temporisation, les durées définies par des variables CSS et la raison pour laquelle les propriétés composites du GPU assurent la fluidité des mouvements.