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转换

回答

相关问题