JavaScript/CSS : Delay between adding element to DOM and its CSS rules being applied?

Question

我正在使用 JavaScript 将元素动态添加到 DOM。我想使用 CSS3 转换在添加元素时“淡入”该元素。

我正在使用类似下面的方法来实现这一点:

function add(el) {

    el.className += ' fader';
    el.style.opacity = 0;

    document.getElementById('parent-element').appendChild(el);
    //setTimeout(function () { el.style.opacity = 1; }, 5);
    el.style.opacity = 1;

}

还有 CSS:

.fader {
    -webkit-transition: opacity 0.5s;
}

这没有按预期工作 - 元素没有淡入。如果我将行 el.style.opacity = 1; 替换为 setTimeout(function () { el.style .opacity = 1; }, 5);，正如上面注释掉的那样，它确实按预期工作。

我猜测第一种情况不起作用，因为在添加元素和应用适当的 CSS 规则之间存在一些延迟。 setTimeout 在第二种情况下产生的 5 毫秒延迟为应用这些规则提供了足够的时间，因此淡入淡出按预期发生。

首先，这是一个正确的假设吗？其次，有没有更好的方法来解决这个问题？ setTimout 感觉像是一个 hack。一旦元素应用了所有样式，是否可能会触发某些事件？

Answer 1

要使 CSS3 过渡起作用，对象必须以特定状态存在，然后您必须对触发过渡的对象进行更改。

出于各种原因，我在 CSS3 转换方面的所有经验都向我表明，对此重要的状态只是当您的 javascript 返回并且浏览器返回其事件循环时它存在的状态。就好像，您可以告诉浏览器现在在您的对象处循环并记住它的状态以供将来转换的唯一方法是返回浏览器事件循环。有一些编程原因可能会出现这种情况(因此它不会在您以编程方式构建对象并更改它时尝试执行转换)，但这些问题可以通过不同的方式解决(例如通过特定方法调用现在编码对象)，但它不是那样做的。

因此，您的解决方案就是我找到的解决方案。创建处于初始状态的对象。设置一个持续时间很短的计时器。从所有 javascript 返回，以便对象将在其初始状态下进行编码，因此计时器可以触发。在计时器事件中，向触发 CSS3 转换的对象添加一个类。

老实说，我不知道规范中是否以这种方式指定了 CSS3 转换，但我在 Safari、Firefox 和 Chrome 中的经验表明它们就是这样工作的。