我希望高度平滑地扩展，但 95% 的时间都不会发生过渡。这是因为 classList.toggle 创建了一个新的类字符串，因此转换丢失了吗？无论哪种方式，我该如何解决这个问题？为此，我必须使用 vanilla JS。
document.querySelectorAll('.toggleMe').forEach(function (query) {
query.onclick = function (e) {
e.target.classList.toggle('open');
}
});.toggleMe {
background: #e3e3e3;
max-height: 1.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
transition: all ease 2s;
-moz-transition: all ease 2s; /* Firefox 4 */
-webkit-transition: all ease 2s; /* Safari and Chrome */
-o-transition: all ease 2s; /* Opera */
-ms-transition: all ease 2s; /* Explorer 10 */
}
.toggleMe.open {
max-height: 999px;
white-space: normal;
}<div class="toggleMe">I am a really long sentence that wants to stay hidden on load, but when clicked will expand for all to see. But 95% of the time, the transition doesn't happen. Is this because the classList.toggle creates a new class string, and therefore the transition is lost?</div>最佳答案
将 max-height 设置想象成一种以动画方式垂直打开和关闭的窗口/视口(viewport)。
同时，white-space 设置会导致段落立即增加或减少高度，没有动画。
当段落的高度立即增加时，如果窗口开始时处于完全关闭的位置，您只能看到动画，因为当窗口开始打开时，它会显示段落。
折叠时，段落会立即折叠，但 max-height 窗口需要整整 2 秒才能关闭。这并不明显，因为所有这些时间都花在了遍历几乎 999px 的假想不动产上。
因此，您必须等待整整 2 秒才能关闭该窗口，以便下次看到展开动画。否则，如果您不等待，窗口仍然是部分打开的，并且它会在没有先稳定到其最小高度的情况下再次打开。因此，它无法重新创建动画。
我认为它似乎间歇性失败的原因是，在您的测试期间，您在展开、折叠和重新展开之间等待的时间长短不一。
我希望这是有道理的。对高度不可预测的文本创建展开/折叠效果肯定有点棘手。如果您减少 max-height: 999px 设置，它可以最大限度地减少问题。但它可能会切断更大的段落:/
关于javascript - Target 的 Toggled ClassList 上的 CSS Transition 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67978724/
相关文章：
awk - 使用 awk 和 gsub 用字符串替换 CSV 的列
c++ - std::sort 中用 lambda 函数指定的比较函数是否返回 bool 类型？
numpy - XGBoost:检查失败:有效:输入数据包含 `inf` 或 `nan`
python - Django Channels - Websocket 连接失败
ruby - 如何在 ruby 中编写一个采用散列样式、方括号参数的方法，例如 mymethod
kubernetes - 如何在 Kubernetes cronjob 中执行脚本 shell