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

Question

我有一个触发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并且不会进行转换。

Answer 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/