Javascript - 動態創建元素上的CSS轉換

我使用（純！）Javascript創建元素。Javascript - 動態創建元素上的CSS轉換

var dynamic_gallery = document.createElement("li");

現在我給它分配一個類，它給出元素{...;高度：0;過渡持續時間：，4S; }

dynamic_gallery.className = "gallery-container";

權在此之後，我添加具有{高度另一個類：400像素重要;}

dynamic_gallery.className += " gallery-exp";

從我的理解，應將元素創建無形的，並立即收到高度變化及！平穩增長到400px。
那麼它爲什麼仍然會立即出現在全高？

來源

2014-02-13 Mo Friedrich

CSS3過渡延遲事件將用於元件是活之後被解僱。在這裏你已經設置高度爲0，但仍然「li」元素不在DOM（所以它不活）。

所以在將高度設置爲0px後使其生效。即

document.body.appendChild(dynamic_gallery)

「麗」正在直播，以及過渡期：事件，4S已經註冊。

現在通過指定類將高度增加到400px， dynamic_gallery.className + =「gallery-exp」;

你會看到流暢的動畫。

編輯：大多數瀏覽器需要時間來使元素生活，所以我們需要一個0秒的超時，使其工作。

因此它應該是

setTimeout(function(){ 
    dyna_gallery.className += " gallery-exp";},0)

，而不是

dyna_gallery.className += " gallery-exp";

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

來源

2014-02-13 13:16:27 WebServer

這對我不起作用，請參閱[小提琴]（http://jsfiddle.net/HZ6VP/） –

我已經更新了答案，請檢查小提琴。 – WebServer

謝謝，那就是我正在尋找的:-) –

爲什麼它會「順利」增長？

直到代碼結束，纔會呈現您在腳本中執行的DOM（包括CSS）的所有更改。

如果你想改變是可見的，你有一個setTimeout迫使你的代碼要結束了，例如：

var dynamic_gallery = document.createElement("li"); 
dynamic_gallery.className = "gallery-container"; 
... appending 
setTimeout(function(){ 
    dynamic_gallery.className += " gallery-exp"; 
}, 2000); // wait 2 seconds before adding the class

但是：

這不會使其順利在所有。要做到這一點，你必須調用許多改變（改變元素的高度而不是一個類）而不是一個
使用!important幾乎總是壞設計的標誌。這裏是。

這裏是你的動畫元素的高度從0到400 PX的例子：

(function grow(){ 
    var h = (parseInt(dynamic_gallery.style.height)||0)+1; 
    dynamic_gallery.style.height = h+'px'; 
    if (h<400) setTimeout(grow, 30); 
})();

Demonstration

來源

2014-02-13 12:56:36

嗯謝謝你，我不知道該代碼將渲染之前執行完畢，我仍在學習。但是我怎麼才能達到那種效果呢？ –

@MoritzFriedrich我添加了代碼來做香草js中的動畫 –

Javascript - 動態創建元素上的CSS轉換

回答

相關問題