Comment utiliser correctement le raccourci de transition CSS pour plusieurs propriétés ?

Transition CSS avec plusieurs propriétés : clarification de la syntaxe abrégée

La syntaxe abrégée de transition CSS nous permet de faire la transition entre plusieurs propriétés simultanément. Cependant, la syntaxe fournie dans l'exemple donné est incorrecte.

Structure de la syntaxe abrégée :

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Remarque : La durée doit précéder le delay si le délai est spécifié.

Corriger la syntaxe abrégée pour le donné Exemple :

transition: height 0.5s, opacity 0.5s 0.5s;

Cette syntaxe indique que :

• La propriété height effectue une transition sur 0,5 seconde.
• La propriété opacité effectue une transition sur 0,5 seconde, avec un délai de 0,5 seconde.

Simplifié Syntaxe :

Si vous effectuez la transition de toutes les propriétés simultanément, vous pouvez utiliser la syntaxe abrégée simplifiée suivante :

transition: all 0.5s;

Exemple de code avec la syntaxe correcte :

.element {
  transition: height 0.5s, opacity 0.5s 0.5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

Ce code mis à jour devrait désormais modifier en douceur la hauteur et l'opacité de l'élément.

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!