Question

我有一个元素，其宽度我希望在其内容发生变化时进行动画处理。它有width: auto，这永远不会改变。我已经看过this trick，但是在两个值之间进行转换并且设置了一个。我根本没有操纵这些值，只有内容，我喜欢我的元素大小随着动画而改变。这在CSS中是否可行？

这是我的代码的简化版本：

＆＃13;

.myspan {
  background-color: #ddd;
}

.myspan:hover::after {
  content: "\00a0\f12a";
  font-family: Ionicons;
  font-size: 80%;
}

＆＃13;

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

＆＃13;

当用户将鼠标悬停在元素上时，我希望将大小更改为动画。

Answer 1

正如我评论的那样，使用＆＃34; max-width＆＃34; /＆＃34; max-height＆＃34;特技。

给它一个足以容纳最宽的值。

＆＃13;

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

＆＃13;

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

<span class="myspan">Hello!</span>

＆＃13;

CSS过渡自动宽度

1 个答案: