我有一个元素,当它的内容发生变化时,它的宽度我想要动画.它有宽度：自动,这永远不会改变.我见过
this trick,但这是为了在两个值之间转换而设置一个.我根本没有操纵值,只是内容,我希望我的元素大小随着动画而改变.这在CSS中完全可能吗？
这是我的代码的简化版本：
.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>
当用户将鼠标悬停在元素上时,我希望将大小更改为动画.
解决方法
正如我评论的那样,使用“max-width”/“max-height”技巧.
给它一个足够大的值来容纳最宽的.
.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: all 1s;
vertical-align: bottom;
overflow: hidden;
}
.myspan:hover::after {
max-width: 80px;
transition: all 1s;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> <span class="myspan">Hello!</span>
