CSS过渡自动宽度 [英] 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.
推荐答案
正如我所评论的，不能为<$设置动画c $ c> auto （还），因此可以使用最大宽度 / 最大高度技巧，或者，如果需要更精确的方法，请使用脚本设置宽度。
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.
使用 max-width / 最大高度把戏，给它一个足够大的值以容纳最宽的东西。
With the max-width/max-height trick, give it a value big enough to accommodate the widest.
堆栈代码段
.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>
这篇关于CSS过渡自动宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
