Comment animer la largeur d'un élément avec CSS lorsque le contenu change dynamiquement ?

Animer la taille du contenu avec la largeur automatique CSS

Question

Comment animer la largeur d'un élément avec width: auto lorsque son contenu change ? Le contenu change dynamiquement et la largeur de l'élément doit changer en conséquence avec l'animation.

Réponse

Bien que CSS ne prenne pas directement en charge l'animation des valeurs automatiques, il existe deux approches pour obtenir cet effet :

1. Astuce Max-Width/Max-Height

• Donnez à l'élément une largeur maximale ou une hauteur maximale fixe suffisamment grande pour accueillir le contenu le plus large possible.
• Pour exemple :

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  max-width: 500px; /* Set a sufficiently large max-width */
}

2. Paramètre de largeur basé sur un script

• Utilisez JavaScript ou un autre langage de script pour définir la largeur de l'élément de manière dynamique lorsque le contenu change.
• Cette approche offre un contrôle plus précis sur les changements de largeur .
• Par exemple (en utilisant jQuery) :

$(document).ready(function() {
  $(".myspan").hover(function() {
    $(this).width($(this).find("span").outerWidth());
  }, function() {
    $(this).width("auto");
  });
});

Exemple avec Hover Effet

En utilisant l'astuce max-width/max-height, nous pouvons créer un exemple simple où la largeur de l'élément s'anime au survol :

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

.myspan::after {
  content: " <pre class="brush:php;toolbar:false"><link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

<span class="myspan">Hello!</span>

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

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!