Simplifier les animations CSS avec les propriétés d'affichage et de taille

Écrit par Saleh Mubashar✏️

Jusqu'à récemment, seul un nombre limité de propriétés CSS pouvaient être animées. Par exemple, pour créer un effet de fondu entrant ou sortant, vous utiliserez généralement la propriété opacity au lieu de la propriété display, car cette dernière ne peut pas être animée. Le problème, cependant, est que même si l’élément devient visuellement masqué, il reste présent sur la page.

Récemment, Chrome a introduit de nouvelles fonctionnalités qui résolvent ce problème et simplifient grandement le processus de développement. Dans cet article, nous comparerons les méthodes traditionnelles d'animation des propriétés d'affichage et de taille avec ces nouvelles fonctionnalités.

Le problème avec l'affichage animé et la taille des éléments

Il y a de fortes chances que vous ayez dû créer un effet de fondu entrant/sortant sur certains éléments en utilisant CSS à un moment donné. La méthode incontournable consiste à appliquer une animation ou une transition à l’opacité de l’élément. Mais définir l’opacité sur zéro ne supprime pas réellement l’élément, cela le rend simplement invisible. La plupart du temps, c’est suffisant.

Mais disons que vous disposez d'une liste de tâches dans laquelle les utilisateurs peuvent supprimer des éléments. Si vous souhaitez créer une animation de sortie telle que l'élément disparaît, vous utiliserez normalement l'opacité. Mais si la liste doit ajuster sa hauteur, vous devrez également définir l’affichage sur aucun. Le problème ici est que même si l'élément a disparu visuellement, il occupe toujours de l'espace dans le DOM et perturbe des éléments tels que la mise en page et les interactions des utilisateurs.

Voici une comparaison côte à côte de deux approches : l'une utilisant uniquement l'opacité et l'autre combinant l'opacité et l'affichage. Vous pouvez essayer l'exemple ci-dessous pour voir les différences :

Voir la comparaison de l'application Pen Simple Todo par Saleh-Mubashar (@saleh-mubashar) sur CodePen.

Remarquez comment la mise en page change lorsque l'on combine l'affichage avec l'opacité, tandis que l'utilisation de l'opacité seule laisse des espaces dans la liste. Bien que la deuxième méthode (affichage de l'opacité) résolve le problème de mise en page, elle interfère avec l'effet de fondu fluide car display: none n'est appliqué avant la fin du fondu. Cela provoque une disparition soudaine plutôt qu’un effacement progressif.

Par exemple, la propriété opacity peut passer en douceur de 0 à 1. Cependant, la propriété display ne peut pas être animée car elle n'a pas de plage numérique — ses états sont binaires, comme aucun, bloc ou d'autres valeurs. Puisqu’il n’y a pas de valeur intermédiaire, CSS ne peut pas animer l’affichage.

De même, les développeurs sont souvent confrontés à des défis lorsqu'ils tentent d'animer la taille intrinsèque d'un élément, tel que height: auto. Ceci est couramment utilisé pour les transitions sur des sections pliables comme les accordéons, où la hauteur commence à 0 px lorsqu'elle est fermée et s'étend pour s'adapter au contenu lorsqu'elle est ouverte. Bien que les propriétés de taille telles que la hauteur puissent généralement être animées (car elles ont des valeurs de début et de fin numériques), l'animation vers ou depuis l'auto crée des problèmes. Le navigateur ne peut pas calculer les pas entre 0px et auto ; des solutions de contournement complexes doivent donc être utilisées.

Les solutions traditionnelles d'animation d'affichage et de taille

Il existe plusieurs façons de relever les défis liés à l'animation de l'affichage et à la taille des éléments. Dans cette section, nous discuterons des solutions les plus populaires utilisant à la fois CSS et JavaScript.

Solutions basées sur CSS

Il existe plusieurs façons de résoudre le problème de la propriété display qui ne peut pas être animée à l'aide de CSS. Le plus fiable consiste à utiliser l'opacité avec une propriété de taille telle que la hauteur ou la largeur. Dans ce cas, la propriété size est utilisée pour supprimer efficacement l'élément du DOM. Cela peut être fait en utilisant la propriété transition-delay. Fondamentalement, nous ajoutons un délai à la transition de taille, qui est égal au temps défini pour la transition d'opacité. Une fois que l'élément disparaît, sa taille est immédiatement mise à zéro, le supprimant ainsi de la mise en page comme si display : aucun n'avait été appliqué.

En utilisant à nouveau la liste de tâches comme exemple, la mise en œuvre ressemblerait à ceci :

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Ici, l'astuce consiste à régler la hauteur et le remplissage à 0 après un délai une fois que l'opacité atteint 0. Le délai et la durée de l'opacité doivent être les mêmes — dans ce cas, 400 ms. La hauteur : 0 garantit que l'élément de liste n'interagit pas avec la mise en page. Comme indiqué précédemment, height : s'ajuste automatiquement de manière dynamique en fonction du contenu ; par conséquent, il ne peut pas être animé. Par conséquent, vous devez vous assurer que l’élément a une hauteur spécifique et fixe pour que l’animation fonctionne correctement.

Définir la visibilité sur caché est une autre méthode couramment utilisée. Cependant, cela ne supprime pas l’élément du DOM et affecte toujours la disposition normalement, c’est-à-dire qu’il influence le positionnement des éléments environnants.

La solution CSS la plus courante pour animer un élément vers ou depuis sa taille intrinsèque (ou height: auto) consiste à utiliser max-height au lieu de height. Ce n’est pas l’implémentation la plus propre, mais elle fait le travail. En gros, vous définissez la hauteur maximale sur une valeur supérieure à celle que l'élément obtiendra jamais. De cette façon, cela imite une transition douce, semblable à l'animation d'une hauteur fixe :

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

L'inconvénient le plus évident de cette approche est que vous devez vous assurer que la hauteur maximale est toujours plus grande que le contenu réel à l'intérieur de l'élément. Un autre problème est que le timing de transition peut sembler inexact à moins que la hauteur du contenu ne corresponde parfaitement à la valeur de hauteur maximale.

Disons que votre contenu a une hauteur de 400 px mais que vous définissez la hauteur maximale sur 1 000 px. L’animation continuera techniquement pendant toute la durée (disons deux secondes). Mais visuellement, l'élément cessera de croître dès qu'il atteindra la hauteur réelle du contenu (400 px), tandis que la hauteur maximale continuera de passer à 1 000 px. Ainsi, dans ce cas, la durée de transition sera plus courte que celle que vous préciserez.

Méthodes JavaScript

Toutes les solutions CSS évoquées ci-dessus sont assez complexes et peuvent conduire à des résultats imprévisibles. Jusqu'à récemment, le moyen le plus fiable d'y parvenir était d'utiliser JavaScript.

Pour appliquer l'affichage aucun après une transition d'opacité, nous pouvons utiliser la fonction setInterval ou setTimeout pour ajouter un délai qui correspond à la durée de la transition d'opacité. Passé ce délai, vous pouvez régler l'affichage sur aucun. Voici un exemple :

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Dans ce code, après avoir cliqué sur le bouton, l'élément disparaît pendant une seconde, puis son affichage est immédiatement défini sur aucun, ce qui le supprime essentiellement de la mise en page.

De même, pour animer la taille intrinsèque, nous pouvons calculer la hauteur de l'élément en JavaScript et utiliser cette valeur comme point final pour la hauteur. Cette approche est beaucoup plus fiable et précise. Cependant, gardez à l’esprit que nous animons toujours sur la propriété height.

L'avantage évident ici est que vous définissez dynamiquement la hauteur en fonction du contenu réel de l'élément, garantissant ainsi que la transition correspond à la hauteur réelle plutôt que de deviner avec la hauteur maximale.

Voici comment procéder :

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

Dans cet exemple, nous développons une section qui commence par une hauteur de 0. Nous utilisons scrollHeight pour saisir toute la hauteur du contenu et l'utiliser comme point final pour la transition. Une fois la transition terminée, nous passons la hauteur sur automatique, ce qui permet au navigateur d'ajuster automatiquement la hauteur du conteneur en fonction de son contenu. Cette étape est facultative, mais elle est utile si vous vous attendez à ce que le contenu du conteneur change au fil du temps.

Nouvelles fonctionnalités CSS pour animer l'affichage et les propriétés de taille intrinsèques

Examinons maintenant les nouvelles fonctionnalités CSS récemment arrivées ou en route vers les navigateurs. Ces nouveaux outils éliminent le besoin de JavaScript dans les scénarios évoqués précédemment et vous aident à écrire du CSS plus propre et plus court.

Affichage et images clés

La règle at @keyframes vous permet de créer des animations en contrôlant les étapes intermédiaires d'une séquence d'animation. La dernière mise à jour vous permet d'animer les propriétés d'affichage et de [content-visibility](https://blog.logrocket.com/using-css-content-visibility-boost-rendering-performance/) dans une chronologie d'images clés.

Nous n’interpolons pas exactement entre display none et block (car ce n’est pas possible). Au lieu de cela, nous attendons que tous les autres effets soient terminés, puis changeons l'état d'affichage. C'est similaire à ce que nous avons fait avec JavaScript — attendre la fin de la transition avant d'appliquer display: none — mais maintenant c'est beaucoup plus facile avec CSS.

Le Chrome Dev Blog propose une démo vraiment sympa qui clarifie les choses :

Voir les cartes Pen Fade out - Animation par web.dev (@web-dot-dev) sur CodePen.

Tout d'abord, l'opacité est réglée à 0 sur 250 ms. Une fois cette séquence terminée, l'affichage est immédiatement mis à aucun :

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Le plus gros avantage ici est que des animations plus complexes impliquant la propriété display, qui étaient jusqu'à récemment très difficiles à implémenter à l'aide de CSS (ou JavaScript), peuvent désormais être créées relativement facilement.

Comment le comportement de transition simplifie les transitions d'affichage

L'effet de fondu peut désormais également être créé avec une transition en utilisant la nouvelle propriété [transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) . Cela vous permet d'appliquer des transitions aux propriétés qui ont un comportement d'animation discret, comme l'affichage. En utilisantallow-discrete, vous pouvez animer la propriété d'affichage. Voici un exemple rapide :

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

Animations d'entrée avec @starting-style

Nous avons discuté assez longuement de l’effet de fondu dans cet article. Mais qu’en est-il du cas contraire ? Les animations d'entrée sont délicates et souvent possibles uniquement via JavaScript. La nouvelle règle at @starting-style rend les choses beaucoup plus faciles.

Comme son nom l'indique, nous pouvons l'utiliser pour appliquer un style à un élément que le navigateur peut rechercher avant que l'élément ne soit visible sur la page. Nous pouvons définir ici l'état initial d'une animation d'entrée. Une fois l'élément rendu, il revient à son état par défaut.

Voici un exemple de base :

document.getElementById("fadeButton").addEventListener("click", function () {
  const element = document.getElementById("myElement");
  element.style.opacity = "0";
  setTimeout(() => {
    element.style.display = "none";
  }, 1000); // Match this value with the duration in CSS
});

La carte disparaîtra une fois le DOM chargé. Vous pouvez utiliser @starting-style pour toutes sortes d'animations d'entrée. Voici un autre exemple génial de l'équipe de développement Chrome :

_Voir les transitions Pen Item par web.dev (@web-dot-dev) sur CodePen.
_

Animer des tailles intrinsèques avec la fonction calc-size()

La fonction calc-size, similaire à calc(), a été récemment introduite dans Chrome 129. En termes simples, elle permet d'effectuer des calculs sur des tailles intrinsèques de manière sûre et fiable. Il prend actuellement en charge les opérations de quatre mots-clés : auto, min-content, max-content et fit-content.

Ceci est particulièrement utile pour animer des éléments vers et depuis leur taille intrinsèque. calc-size permet d'animer n'importe quelle hauteur qui peut actuellement être spécifiée en CSS à zéro ou vers/à partir d'une petite valeur fixe. Voici un exemple simple d'expansion d'une section pliable de la hauteur : 0 à auto :

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Compatibilité du navigateur

La plupart de ces fonctionnalités sont principalement destinées à améliorer les animations et non les composants DOM essentiels, mais comme elles sont relativement nouvelles, cela vaut toujours la peine de vérifier la compatibilité du navigateur :

• La propriété d'affichage est @keyframe animable dans Chrome 116 et Opera 102 . Le support de Firefox est encore en développement et Safari y travaille
• La propriété [transition-behavior](https://caniuse.com/mdn-css_properties_transition-behavior) a été publiée pour la première fois dans Chrome 117. Elle est compatible avec tous les principaux navigateurs à l'exception de Firefox, où elle est actuellement en développement
• La règle at [@starting-style](https://caniuse.com/mdn-css_at-rules_starting-style) a été introduite dans Chrome 117. Elle est entièrement prise en charge sur tous les principaux navigateurs, à l'exception de Firefox, où elle le fait. pas encore pris en charge l'animation à partir de l'affichage : aucun
• calc-size() est la dernière fonctionnalité introduite dans Chrome 129 et n'est actuellement prise en charge que dans Chrome et Edge. Cependant, d'autres grands navigateurs le prendront bientôt en charge

Conclusion

Dans cet article, nous avons exploré les défis auxquels les développeurs sont confrontés lors de l'animation des propriétés CSS telles que l'affichage et la taille des éléments. Les méthodes traditionnelles nécessitaient des solutions de contournement complexes avec CSS et JavaScript pour réaliser des animations pour les propriétés qui ne pouvaient pas être animées directement.

De nouvelles fonctionnalités, telles que l'animation de l'affichage avec des images clés, la fonction calc-size() et la propriété transition-behavior, facilitent la réalisation de ces animations. Ces fonctions éliminent le besoin de JavaScript, permettant des animations CSS plus simples.

---

Votre interface monopolise-t-elle le processeur de vos utilisateurs ?

À mesure que les interfaces Web deviennent de plus en plus complexes, les fonctionnalités gourmandes en ressources exigent de plus en plus du navigateur. Si vous souhaitez surveiller et suivre l'utilisation du processeur côté client, l'utilisation de la mémoire et bien plus encore pour tous vos utilisateurs en production, essayez LogRocket.

LogRocket est comme un DVR pour les applications Web et mobiles, enregistrant tout ce qui se passe dans votre application Web, votre application mobile ou votre site Web. Au lieu de deviner pourquoi les problèmes surviennent, vous pouvez regrouper et créer des rapports sur les principales mesures de performances du front-end, rejouer les sessions utilisateur avec l'état de l'application, enregistrer les requêtes réseau et faire apparaître automatiquement toutes les erreurs.

Modernisez la façon dont vous déboguez les applications Web et mobiles : démarrez la surveillance gratuitement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!