新元素的CSS过渡

一尘不染

新元素的CSS过渡

css

我找不到在新创建的dom元素上使用css过渡的方法。

假设我有一个空的html文档。

<body>
    <p><a href="#" onclick="return f();">click</a></p>
</body>

我也有这个CSS

#id {
    -moz-transition-property: opacity;
    -moz-transition-duration: 5s;
    opacity: 0;
}

#id.class {
    opacity: 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;
}

但是，正如您在 http://jsfiddle.net/gwxkW/1/上看到的那样，单击该元素会立即显示。

如果我尝试在a中设置类，timeout()我 通常会
找到结果，但是对我来说，这似乎更像是javascript和CSS引擎之间的竞赛。有没有要听的特定事件？我尝试使用，document.body.addEventListener('DOMNodeInserted', ...)但无法正常工作。

如何在新创建的元素上应用CSS过渡？

阅读 253

2020-05-16

共1个答案

一尘不染

requestAnimationFrame()似乎可以跨Firefox，Chrome和Safari使用。一个更可靠，更合理的解决方案setTimeout()。对于较旧的浏览器（IE8），将需要使用Polyfill（自然，过渡不会发生，但是CSS仍会更改）。

2020-05-16