CSS 过渡自动宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38643529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS transition auto width
提问by Luke Taylor
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?
我有一个元素，当它的内容改变时，我想为其宽度设置动画。它有width: auto，而且永远不会改变。我见过这个技巧，但那是为了在两个值之间转换并设置一个值。我根本不操纵值，只操纵内容，并且我希望元素的大小随动画而变化。这在 CSS 中完全可能吗？
Here's a simplified version of my code:
这是我的代码的简化版本：
.myspan {
background-color: #ddd;
}
.myspan:hover::after {
content: "<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>
a0\f12a";
font-family: Ionicons;
font-size: 80%;
}.myspan {
display: inline-block;
font-size: 30px;
background-color: #ddd;
vertical-align: bottom;
}
.myspan::after {
content: " <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;
}I'd like the changing size to animate when the user hovers over the element.
当用户将鼠标悬停在元素上时，我希望更改大小以进行动画处理。
回答by Ason
As I commented, one can't animate auto(yet), so either use the max-width/max-heighttrick, or, if you need it to be more exact, set the width using a script.
正如我所评论的，人们auto（还）不能设置动画，所以要么使用max-width/max-height技巧，要么，如果您需要更精确，使用脚本设置宽度。
With the max-width/max-heighttrick, give it a value big enough to accommodate the widest.
使用max-width/max-height技巧，给它一个足够大的值以容纳最宽的。
Stack snippet
堆栈片段
