JavaScript/CSS：将元素添加到DOM和应用其CSS规则之间的延迟？

我正在使用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=1setTimeout的code>（函数（）{el.style.opacity=1；}，5），如上所述，它确实可以按预期工作

我猜第一种情况不起作用，因为在添加元素和对其应用适当的CSS规则之间有一些延迟。在第二种情况下，
setTimeout
创建的5ms延迟为应用这些规则提供了足够的时间，因此淡入淡出按预期进行

首先，这是一个正确的假设吗？第二，有没有更好的办法来解决这个问题？
setTimout
感觉像是一个黑客。元素应用了所有样式后是否会触发某些事件？
要使CSS3转换工作，对象必须以特定状态存在，然后必须对触发转换的对象进行更改

出于各种原因，我对CSS3转换的所有经验都告诉我，当javascript返回并且浏览器返回到其事件循环时，对CSS3转换起作用的状态只是它存在的状态。这就好像，告诉浏览器立即循环对象并记住其未来转换状态的唯一方法是返回浏览器事件循环。之所以会出现这种情况，有一些编程方面的原因（因此，在以编程方式构建对象并对其进行更改时，不会尝试执行转换），但这些问题本可以用不同的方法解决（比如现在使用特定的方法调用对对象进行编码），但没有这样做

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

老实说，我不知道规范中是否以这种方式指定了CSS3转换，但我在Safari、Firefox和Chrome中的经验是，它们就是这样工作的。
CSS是否在javascript之后出现？不，CSS已经出现在页面上了。它通过标签包含在文档中。可能是@TimMedora的副本-这个问题可能与您引用的问题相似，但这个问题还没有答案。啊，这是有道理的。我同意有一种更好的方法可以（读：应该）对元素进行一系列更改（不触发转换），而不必返回浏览器事件循环。