如何使用宽度转换内容的宽度:auto

我有一个元素，当它的内容发生变化时，我想为它的宽度设置动画。它有width: auto，这一点永远不会改变。我已经看到了这个技巧，但这是为了在两个值之间转换，并且设置了一个值。我根本不操纵值，只操纵内容，我希望元素的大小随着动画的变化而改变。这在CSS中可能吗？

这是我代码的简化版本：

.myspan {
  background-color: #ddd;
}
.myspan:hover::after {
  content: "0a0f12a";
  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: " 0a0f12a ";
  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>

我认为很有用

const expandBtn = document.getElementById('expand-btn');
expandBtn.onclick = (e) => {
  e.target.nextElementSibling.classList.toggle("active");
}

ul {
  background-color: yellow;
  overflow: hidden;
  transition-duration: 1s;
  transition-property: max-height;
  height: auto;
  max-height: 0;
}
ul.active {
  max-height: 600px;
}

<button id="expand-btn">Expand</button>
<ul>
  <li>Hihi</li>
  <li>Hello</li>
  <li>Rap star</li>
  <li>Hiphop</li>
</ul>

相关内容

最新更新

热门标签：