Javascript 如何强制样式应用于转换/显示排队顺序

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

我有一个

，它在单击事件（其他地方）时展开。具有溢出控制，因此其内容逐渐出现。一旦完全展开，需要移除溢出控制，因为内容可能高于展开到的高度，并且有一些内部元素需要戳到区域外

我有三点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

，它将在大约一半的时间内渲染。i、 e.有时候，面板会优雅地收缩，有时候它会立即从

.active

转换到默认状态

如何延迟调用最后一个类更改，直到

.activating

正确呈现到显示中，以便转换实际按预期工作

---

（这是在Firefox中发生的，与之前的代码完全相同。）

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

---

请准确地回答我想问的问题。我需要

的
最大高度
部分。激活

类将由浏览器渲染器识别和实现，以便在移除类时，面板可以优雅地收缩。如何确保在删除

.activating

类之前发生了这种情况？最好在类中尝试动画。“最大高度”不是设置动画的好属性。请尝试使用“正常高度”也可以！不建议使用“重要”，因为它会删除所有其他样式！这一点很重要，因为当我几个月前第一次这样做时，这是识别它的唯一方法，所以它没有从

.active

跳到plain，就好像中间步骤不存在一样。而

高度

是不可传递的。所有关于如何设置展开面板动画的答案都是使用

max height

。问题不在于过渡类型。我完全理解过渡的拖延。（我只在测试中使用了慢速2s，因为它更明显。）我需要代码来应用-或者在本例中删除-类延迟，只要渲染引擎需要更新，因此，可以识别来自

的
最大高度
。激活
。即使在0.2秒时，
setTimeout
上的延长延迟仍然有效，但这是一种不干净的黑客行为。没有任何东西可以保证该类的长度足以应用于渲染引擎。（0.1s足够一半的时间。）我想确保它已被应用，但不能延迟更长的时间…尝试不使用SetTimeOut，它保证永远不会识别
。激活
。因此，扩展面板只是消失，而不是卷起。（它以前在没有设置超时的情况下工作，并且使用了
！important
，但我猜Gecko的“流线型”已经破坏了它。）