javascript - 如何强制样式申请过渡/显示排队顺序

我正在尝试使某些过渡正常工作，但是由于浏览器将各种JS和显示渲染线程排队的方式，这变得越来越困难。

我有一个<div class="expandable">，它会在click事件（其他地方）上展开。使用溢出控制，因此其内容逐渐出现。一旦完全扩展，就需要删除溢出控制，因为内容可能比扩展到的高度更高，并且某些内部元素需要在该区域外戳。

我有三点CSS：

.expandable {
    max-height: 0;
    overflow: hidden;
    transition: all 2s;
}
.expandable.activating {
    max-height: 1000px !important;
    overflow: hidden;
    transition: all 2s;
}
.expandable.active {
    max-height: none;
    overflow: visible;
    transition: none;
}

单击触发元素，然后将.activating添加到我们的div中。过渡完成后，我们删除.activating并添加.active。到目前为止，一切都很好。

但是，在元素展开时单击触发事件时，我遇到了问题。

用n作为对我们div的代码内引用…

if (n.classList.contains("active")) {
    n.classList.add("activating");
    n.classList.remove("active");
    window.setTimeout(function () {
        n.classList.remove("activating");
    }, 0);
}

实际的代码略有不同，因为我具有设置成对的条件类的实用函数，但这实际上正在发生。

问题在于，随着0超时延迟，.activating类在被主动呈现到显示器之前就被删除了。如果我将延迟提高到10，则渲染时间将减少一半。即，有时面板会优雅地收缩，有时会立即从.active转换为其默认状态。

我如何延迟最后一个类更改的调用，直到.activating正确地呈现到显示中，以便转换实际上按预期进行？

（这是在Firefox中发生的，以前完全相同的代码似乎可以正常工作。）

最佳答案

如果将高度设置得太大（如max-height：1000px），这会导致延迟，尤其是当框的高度范围很广时。
因此，您可以尝试以下操作：

.expandable {
    max-height: 0;
    overflow: hidden;
    transition: all 2s;
}
.expandable.activating {
    max-height: 1000px ;
    overflow: hidden;
    transition:  max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
}
.expandable.active {
    max-height: none;
    overflow: visible;
    transition: none;
}

if (n.classList.contains("active")) {
    n.classList.add("activating");
    n.classList.remove("active");
    window.setTimeout(function () {
        n.classList.remove("activating");
    }, 0.5s);
}