web-dev-qa-db-fra.com

Largeur automatique de transition CSS

J'ai un élément dont j'aimerais animer la largeur lorsque son contenu change. Il a width: auto, et cela ne change jamais. J'ai vu cette astuce , mais c'est pour la transition entre deux valeurs et une est définie. Je ne manipule pas du tout les valeurs, seulement le contenu, et j'aimerais que la taille de mon élément change avec l'animation. Est-ce que cela est possible en CSS?

Voici une version simplifiée de mon code:

.myspan {
  background-color: #ddd;
}

.myspan:hover::after {
  content: "\00a0\f12a";
  font-family: Ionicons;
  font-size: 80%;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
  <body>
    <span class="myspan">Hello!</span>
  </body>
</html>

J'aimerais que la taille changeante s'anime lorsque l'utilisateur survole l'élément.

csscss3animationcss-transitionscss-animations
13
Luke Taylor

Comme je l'ai commenté, on ne peut pas animer auto (encore), donc soit utiliser le max-width/max-height astuce, ou, si vous en avez besoin pour être plus précis, définissez la largeur à l'aide d'un script.

Avec le max-width/max-height astuce, donnez-lui une valeur suffisamment grande pour accueillir le plus large.

Extrait de pile

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
}
.myspan::after {
  content: " \00a0\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;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

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