javascript - 创建后立即设置动态创建的div的不透明度

我有一个触发javascript代码的按钮，该javascript代码动态创建模式窗口。我想让它在2秒内从不透明度0变为1。因此，javascript是：

modalWindow.style.opacity = 0;
document.body.appendChild(modalWindow);
modalWindow.innerHTML = '<div>header</div><div>etc,etc...';
modalWindow.style.opacity = 1;

在CSS样式中有：

modalWindow {transition: opacity 2s ease-out;}

在开始时加载。

因此，我希望它淡入，但是当我按下按钮时，它仅以不透明度1直接出现，并且不进行过渡。

最佳答案

发生这种情况的原因是浏览器没有注意到模态窗口以不透明度0开始。
如果使用setTimeout使不透明度的更改稍后发生，则可以使用：

modalWindow.style.opacity = 0;
document.body.appendChild（modalWindow）;
modalWindow.innerHTML ='headeretc，etc ...';
setTimeout（function（）{
    modalWindow.style.opacity = 1;
}，0）;


小提琴：http://jsfiddle.net/U25zu/

关于javascript - 创建后立即设置动态创建的div的不透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21743469/