如何使用 width: auto 转换内容的宽度？答案

【问题标题】：How can I transition width of content with width: auto?如何使用 width: auto 转换内容的宽度？
【发布时间】：2016-12-03 06:26:46
【问题描述】：

我有一个元素，我想在其内容更改时为其宽度设置动画。它有width: auto，这永远不会改变。我见过this trick，但这是用于在两个值之间转换并设置一个。我根本不操纵值，只操纵内容，并且我希望元素的大小随动画而变化。这在 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>

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

【问题讨论】：

您不能仅使用 CSS 为 auto 制作动画。要么使用您链接到的“最大高度”技巧，要么在页面加载时运行一个设置最终高度的小脚本
@LGSon 在这种情况下我如何使用最大宽度技巧，过渡中的两个值都是可变的？
另外，“当内容发生变化时”是什么意思？...他们为什么要那样做？如果您使用 JS 来做到这一点......然后使用 JS 来“自动”改变宽度，
使用max-width 技巧，你可以给它一个足够大的值来容纳最宽的值。如果您发布您的 HTML 和 CSS，我也许可以为您制作一个示例
伪?? ...现在你肯定需要发布你的代码

标签： css animation css-transitions css-animations

【解决方案1】：

正如我评论的那样，（还）无法为auto 设置动画，因此请使用max-width/max-height 技巧，或者，如果您需要更精确，请使用脚本设置宽度。

使用max-width/max-height 技巧，给它一个足够大的值来容纳最宽的值。

堆栈sn-p

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

【讨论】：

对，在伪元素上做。我以为您建议将其放在主要元素上，这就是我感到困惑的原因；）
@LukeTaylor 如果您的关闭图标具有预定义的宽度，您可以只使用 width 代替，并为伪图标提供包含的最终宽度
抱歉，您能帮我多一点吗？将overflow: hidden 与display: inline-block 结合使用会使离子图标消失。
@LukeTaylor 更新了我的答案
嗯，当我尝试创建一个演示该问题的 MCVE 时，它似乎有效。解决不了我就回来。

【解决方案2】：

我觉得很有用

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>

【讨论】：