Comment puis-je animer la largeur d'un élément CSS avec « width : auto » ?

Animer la largeur du contenu avec width : auto

Un défi courant en CSS consiste à animer la largeur d'un élément lorsque son contenu change. Cela peut être délicat, surtout lorsque l'élément a width: auto, ce qui empêche de spécifier une largeur explicite.

La solution traditionnelle consiste à utiliser la propriété transition pour animer entre deux valeurs de largeur spécifiques. Cependant, cette approche ne fonctionne pas bien pour le contenu dont la longueur peut varier, car elle nécessite de définir manuellement les valeurs de largeur entre lesquelles l'élément peut faire la transition.

Comme l'a mentionné le commentateur, il n'est actuellement pas possible d'animer directement la largeur : propriété automatique. Une solution de contournement consiste à utiliser les propriétés max-width et max-height. En fournissant une largeur maximale suffisamment grande pour le contenu, nous pouvons garantir qu'il sera toujours adapté, même lorsqu'il est agrandi.

Voici un exemple de l'astuce "max-width" :

.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;
}

Ici, nous implémentons une animation "flush" lorsque la souris survole l'élément. Le contenu reste fixe à 30 px, tandis que l'icône glisse en douceur grâce à l'animation de largeur maximale.

Si une plus grande précision est souhaitée, une solution JavaScript peut être utilisée. Cela implique de définir dynamiquement la largeur de l'élément en fonction de la longueur de son contenu. Bien que cette approche offre plus de contrôle, elle s'accompagne d'une complexité supplémentaire de mise en œuvre de JavaScript.

En résumé, même si l'animation width: auto directement n'est pas encore possible, des solutions de contournement telles que l'astuce "max-width" ou les scripts JavaScript peuvent être utilisé pour obtenir l'effet souhaité.

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!