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

Question

我正在尝试让一些转换干净利落地工作，但由于浏览器对各种 JS 和显示渲染线程进行排队的方式，这变得越来越困难。

我有一个 <div class="expandable">它扩展了点击事件(在其他地方)。有了溢出控制，所以它的内容是逐渐出现的。一旦完全展开，需要移除溢出控制，因为内容可能比展开后的高度高，并且有一些内部元素需要戳到区域外。

我有三位 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 中，完全相同的代码以前似乎工作得很好。)

Answer 1

如果您将高度设置得太大(例如 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);
}