animer height : 0 à height : auto avec CSS

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-sizepermet 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.

Retour