在創建後設置動態創建的div的不透明度

我有一個觸發動態創建模態窗口的JavaScript代碼的按鈕。我想讓它在2秒內從不透明度0到1出現。因此，JavaScript是：在創建後設置動態創建的div的不透明度

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上，並沒有進行過渡。

來源

2014-02-13 jscripter

它是否必須是不透明的？ – witherwind

如果你申請一個帶有{{transition：clear}'的附加類，並且當你想要它動畫時刪除那個類，那麼怎麼辦？類似於這個問題：http://stackoverflow.com/questions/10630338/clear-css-transitions – zero298

出現這種情況是由於瀏覽器沒有注意到，模態窗口的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/

來源

2014-02-13 01:51:07 Tyilo

在創建後設置動態創建的div的不透明度

回答

相關問題