Question

我试图让一些过渡干净利落，但由于浏览器对各种JS和显示渲染线程进行排队的方式，这变得越来越困难。

我有1428832800979扩展了点击事件（在其他地方）。随着溢出控制，其内容逐渐出现。一旦完全展开，就需要移除溢出控制，因为内容可能高于扩展到高度，并且有一些内部元素需要在区域外戳。

我有三个CSS：

<div class="expandable">

点击触发器元素，我们将.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正确渲染到显示中之前延迟调用最后一次类更改，以便转换实际按预期工作？

（这在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);
}

如何强制样式申请转换/显示排队顺序

1 个答案: