CSS过渡自动宽度

小编典典

CSS过渡自动宽度

css

我有一个元素，其内容更改时我想为其宽度设置动画。它具有width: auto，并且永远不会改变。我已经看到了这个技巧，但这是为了在两个值之间进行转换并设置一个。我根本不操纵值，仅操纵内容，我希望元素的大小随动画而变化。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>

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

阅读 730

2020-05-16

共1个答案

小编典典

正如我所评论的，还不能设置动画auto，所以请使用max-width/ max- height技巧，或者，如果需要更精确的设置，请使用脚本设置宽度。

使用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: 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>

2020-05-16