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

Redimensionnement d'un élément animé avec largeur automatique

Question :

Comment animer la largeur de un élément avec une largeur : auto comme contenu changements ?

Réponse :

Animer la largeur directe d'un élément avec width: auto n'est actuellement pas pris en charge en CSS. Cependant, vous pouvez utiliser des méthodes alternatives :

1. Astuce Max-Width/Max-Height :

• Attribuez une largeur/hauteur maximale suffisamment grande pour s'adapter au contenu potentiel le plus large.
• Utiliser l'affichage : en ligne -bloc pour l'élément pour activer le dimensionnement lors des modifications de contenu.

Code Extrait

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
  max-width: 500px;  // Adjust as necessary
}

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

2. Manipulation JavaScript :

• Utilisez JavaScript pour définir dynamiquement la propriété width en fonction de la longueur du contenu.

Remarque : Cette méthode nécessite des code et peut ne pas être aussi efficace que la première approche.

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!