Javascript css在新元素上的转换

我找不到在新创建的dom元素上使用css转换的方法

假设我有一个空的html文档

我也有这个css

#id{
-moz过渡特性：不透明度；
-moz转换持续时间：5s；
不透明度：0；
}
#身份证类别{
不透明度：1；
}

这是js

function f() {
    var a = document.createElement('a');
    a.id = 'id';
    a.text = ' fading in?';
    document.getElementsByTagName('p')[0].appendChild(a);
    // at this point I expect the span element to be with opacity=0

    a.className = 'class';
    // now I expect the css transition to go and "fade in" the a        

    return false;
}

但是，正如您在上所看到的，当您单击时，元素会立即出现

如果我尝试将类设置为

timeout（）

，我经常会发现结果，但对我来说，这似乎更像是javascript和css引擎之间的竞争。有什么特别的事情要听吗？我试图使用

document.body.addEventListener（'DOMNodeInserted'，…）

但它不起作用

---

如何在新创建的元素上应用css转换

在Firefox中，布局完成和CSS转换之间似乎是一场竞赛。铬更容易预测。如果我在

setTimeout（）

上设置类名，Chrome总是有效的，Firefox只有在

setTimeout（）

时间长时才有效

在Firefox中使用此代码（即使使用

setTimeout（）

），文本也会立即显示：

function f() {
    var a = document.createElement('a');
    a.id = 'id';
    a.innerHTML = ' fading in?';
    document.getElementsByTagName('p')[0].appendChild(a);
    // at this point I expect the span element to be with opacity=0

    setTimeout(function() {
        a.className = 'fadeIn';
    }, 10);
    return false;
}

但是，如果我通过请求一个只能在布局后返回的属性来强制回流，那么它就会在Firefox中开始工作：

function f() {
    var a = document.createElement('a');
    a.id = 'id';
    a.innerHTML = ' fading in?';
    document.getElementsByTagName('p')[0].appendChild(a);
    // at this point I expect the span element to be with opacity=0

    // request property that requires layout to force a layout
    var x = a.clientHeight;
    setTimeout(function() {
        a.className = 'fadeIn';
    }, 10);
    return false;
}

此外，一旦我请求该属性来强制布局，我甚至可以删除

setTimeout（）

，并且动画可以在Firefox中工作

function f() {
    var a = document.createElement('a');
    a.id = 'id';
    a.innerHTML = ' fading in?';
    document.getElementsByTagName('p')[0].appendChild(a);
    // at this point I expect the span element to be with opacity=0

    // request property that requires layout to force a layout
    var x = a.clientHeight;
    a.className = 'fadeIn';
    return false;
}

您可以在Chrome和Firefox中看到最后一个功能：

---

这里有一篇文章讨论了这种现象：

我发现了一种更好的方法，可以在将元素添加到DOM之后触发布局并使转换工作：

window.getComputedStyle(element).opacity;

---

requestAnimationFrame（）

（）似乎可以跨Firefox、Chrome和Safari工作。一个更可靠、更合理的解决方案，

setTimeout（）

。对于较旧的浏览器（IE8），它将需要一个Polyfill（当然，转换不会发生，但是CSS仍然会改变）。

使用

setTimeout

设置类名有效，但只有在延迟为6ms或更长的情况下才有效。不是很好的方法。是的，我尝试了一些低毫秒值（范围0-10），大多数情况下它在5-6毫秒内工作，但我觉得这是错误的方法。我所希望的是与“从现在开始应用css”相关的某种事件，但我不知道它们是否存在，请参见讨论一种干净的方法来实现这一点：感谢链接：虽然我发现这个解决方案有点不成熟，但至少它显然是有动机的。不过，属性技巧对多个项目不起作用；只有延迟才起作用。Tim Taubert在本文底部也讨论了这个解决方案：我不会使用

.cssText

，因为它很重（序列化所有样式）。只需使用

.opacity

，无论如何都应该使用它，因为这是渲染引擎为linkrot更新后应完成的样式：