如何使用width:auto来过渡内容的宽度？

Question

如何使用width:auto来过渡内容的宽度？

cssanimationcss-transitionscss-animations

40

我有一个元素，它的宽度在其内容变化时需要进行动画处理。它的 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>

我希望鼠标悬停在元素上时，能够动画化地改变元素的大小。

- Luke Taylor

1

你不能仅使用CSS来使auto动画化。要么使用你链接的“max-height”技巧，要么在页面加载时运行一个小脚本来设置最终高度。 - Asons

使用 max-width 技巧，您可以为其设置足够大的值以容纳最宽的内容。如果您发布您的 HTML 和 CSS，我可能能够为您制作一个示例。 - Asons

我希望不是这样的... 伪元素不应该包含实际内容...它们是用于样式的。 - Paulie_D

1

伪代码？现在你肯定需要发布你的代码。 - Asons

@Paulie_D 在我的实际代码中，它添加了一个“关闭”图标。 - Luke Taylor

显示剩余3条评论

2个回答

5

我认为这很有用

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>

- robocon321

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

正如我所评论的，目前还不能使用动画效果来处理 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>