Puis-je animer la largeur d'un élément lorsque j'utilise « width : auto » en CSS ?

Comment animer la largeur du contenu avec Auto

En CSS, la propriété width peut être définie sur auto pour forcer un élément à s'adapter à sa taille son contenu. Cependant, cette valeur ne peut généralement pas être animée. Par conséquent, la largeur d'un élément ne changera pas facilement lorsque son contenu change, ce qui peut être visuellement choquant.

Est-il possible d'animer la largeur d'un élément avec width: auto ?

Malheureusement, il n'est pas possible d'animer directement la propriété width d'un élément défini sur auto. La valeur auto est particulière dans le sens où elle oblige l'élément à occuper uniquement l'espace nécessaire à son contenu. Animer cette valeur nécessiterait de modifier le contenu de l'élément, ce qui n'est normalement pas quelque chose que nous voulons faire.

Solution alternative utilisant max-width

Au lieu d'animer la propriété width lui-même, nous pouvons utiliser la propriété max-width avec une transition sur max-width pour créer l'illusion d'animer la largeur. En définissant une largeur maximale supérieure à la largeur réelle de l'élément, nous pouvons forcer l'élément à s'adapter à cette largeur maximale. Lorsque le contenu de l'élément change et devient plus large, la largeur maximale permettra à l'élément de s'étendre jusqu'à sa nouvelle taille maximale, créant l'apparence d'une largeur animée.

Exemple de code :

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
}

.myspan::after {
  content: " a0\f12a ";
  font-family: ionicons;
  font-size: 80%;
  display: inline-block;
  max-width: 0;
  transition: max-width .6s;
  vertical-align: bottom;
  overflow: hidden;
}

.myspan:hover::after {
  max-width: 80px;
  transition: max-width 1s;
}

Dans cet exemple, l'élément .myspan a une propriété max-width définie sur 0. Lorsque l'utilisateur survole l'élément, le La propriété max-width est modifiée en 80px, ce qui force l'élément à atteindre cette largeur. La propriété de transition garantit que le changement de largeur est animé, créant l'apparence d'une largeur animée.

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!