javascript - Target 的 Toggled ClassList 上的 CSS Transition 不起作用

Question

我希望高度平滑地扩展，但 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>

Answer 1

将 max-height 设置想象成一种以动画方式垂直打开和关闭的窗口/视口(viewport)。

同时，white-space 设置会导致段落立即增加或减少高度，没有动画。

当段落的高度立即增加时，如果窗口开始时处于完全关闭的位置，您只能看到动画，因为当窗口开始打开时，它会显示段落。

折叠时，段落会立即折叠，但 max-height 窗口需要整整 2 秒才能关闭。这并不明显，因为所有这些时间都花在了遍历几乎 999px 的假想不动产上。

因此，您必须等待整整 2 秒才能关闭该窗口，以便下次看到展开动画。否则，如果您不等待，窗口仍然是部分打开的，并且它会在没有先稳定到其最小高度的情况下再次打开。因此，它无法重新创建动画。

我认为它似乎间歇性失败的原因是，在您的测试期间，您在展开、折叠和重新展开之间等待的时间长短不一。

我希望这是有道理的。对高度不可预测的文本创建展开/折叠效果肯定有点棘手。如果您减少 max-height: 999px 设置，它可以最大限度地减少问题。但它可能会切断更大的段落:/