CSS transition auto width

问题

I have an element whose width I\'d like to animate when its contents change. It has width: auto, and this never changes. I\'ve seen this trick, but that\'s for transitioning between two values and one is set. I\'m not manipulating the values at all, only the content, and I\'d like my element\'s size to change with animation. Is this at all possible in CSS?

Here\'s a simplified version of my 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>

I\'d like the changing size to animate when the user hovers over the element.

回答1:

As I commented, one can't animate auto (yet), so either use the max-width/max-height trick, or, if you need it to be more exact, set the width using a script.

With the max-width/max-height trick, give it a value big enough to accommodate the widest.

Stack snippet

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

来源：https://stackoverflow.com/questions/38643529/css-transition-auto-width

标签

css

css3

animation

css-transitions

css-animations