Les transitions CSS sont un bon moyen de créer de l'interactivité. Il suffit de, transition
à l'état initial d'un élément, et le navigateur anime la transition entre les deux états. Les transitions pour les tailles d'éléments intrinsèques comme auto
sont cependant un problème pour les développeurs web depuis des décennies, et la seule possibilité consistait à calculer la hauteur de manière dynamique avec JavaScript.
Un autre défi consiste à lancer des transitions lorsqu'un élément reçoit son premier style - par exemple, lorsqu'il est ajouté au DOM ou lorsque le display
-valeur de none
Cet article explique comment résoudre ce problème grâce aux nouvelles fonctions CSS telles que calc-size()
, interpolate-size
, @starting-style
et transition-behavior
peut être surmonté.
Solution avec calc-size()
Si l'on dispose d'un élément du DOM qui passe d'un état fermé (height: 0
) à un état ouvert (height: auto
) passe, l'animation n'est généralement pas exécutée, bien que la transition
-Cela est dû au fait que les navigateurs ne font pas de transitions vers des quantités intrinsèques telles que le nombre d'étoiles. auto
La nouvelle calc-size()
-Cependant, la fonction d'analyse de l'énergie permet d'effectuer des calculs sur ces grandeurs intrinsèques et donc de faire des transitions.:
f95f6dcb193aa903adc84ce47bc4a296
Le site calc-size()
-La fonction Fallback n'est pas encore disponible dans tous les navigateurs. height: auto
-La déclaration de l'ONU sur les droits de l'homme peut être atteinte.
Solution avec interpolate-size
Le site interpolate-size
permet de définir le comportement d'interpolation des navigateurs et de décider s'ils doivent faire la distinction entre des mots-clés comme auto
Par défaut, l'interpolation ne s'effectue qu'entre des valeurs numériques. Avec allow-keywords
tu peux cependant activer des transitions entre les mots-clés:
f95f6dcb193aa903adc84ce47bc4a296
En faisant interpolate-size: allow-keywords
sur le :root
-tu actives le nouveau comportement pour toute la page.
Transition de display:none
Un autre problème survient lorsqu'un élément de display:none
à un état visible. Comme display
n'est pas une propriété animable, il n'y a pas d'animation. Les nouvelles fonctions CSS aident ici @starting-style
et transition-behavior
:
f95f6dcb193aa903adc84ce47bc4a296
Avec transition-behavior: allow-discrete
on s'assure que l'animation est exécutée avant que le display
-valeur de block
sur none
Ces règles permettent d'exécuter des transitions même lors d'une première mise à jour du style. Les @starting-style
-La règle de l'animation "à la volée" permet de s'assurer que l'animation est correctement exécutée lors de la première mise à jour du style.
Support du navigateur
Actuellement, les nouvelles propriétés calc-size()
et interpolate-size
ne sont pas encore pris en charge par tous les navigateurs. Dans Chrome, ils sont disponibles derrière un drapeau d'expérimentation, mais pas encore dans Safari et Firefox. De même, le support des transition-behavior
présent dans Chrome et Edge, mais pas dans Safari et Firefox. Espérons que cela changera à l'avenir.