CSS过渡自动宽度

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个元素，其内容更改时我想为其宽度设置动画。它具有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>

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

回答：

正如我所评论的，还不能设置动画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>

以上是 CSS过渡自动宽度 的全部内容， 来源链接： utcz.com/qa/426328.html

回到顶部