通过JavaScript动态添加的元素的CSS转换[复制]

Question

这个问题在这里已有答案：

• css transition doesn't work if element start hidden 5个答案

我用这样创建一个元素：

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

现在我为它分配一个类，它给出了元素样式a { height:0;transition-duration:.4s; }

dynamic_gallery.className = "gallery-container";  

在这一步之后，我添加了另一个风格为{ height:400px !important; }的类

dynamic_gallery.className += " gallery-exp";

根据我的理解，元素应该是不可见的，并立即接收高度变化并平滑地增长到400px。 那为什么它仍会立即出现在全高度？

Answer 1

生存后将为元素触发CSS3 transition-delay事件。在这里你将高度设置为0，但仍然“li”元素不在DOM中（所以它不是活的）。

所以在将高度指定为0px之后才能使其生效。即

document.body.appendChild(dynamic_gallery)

“li”现在正在使用，并且已经注册了transition-duration：.4s事件。

现在通过指定类，dynamic_gallery.className + =“gallery-exp”将高度增加到400px;

你会看到流畅的动画。

编辑：大多数浏览器需要时间使元素生效，所以我们需要超时0秒才能使它工作。

因此它应该是

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

代替

dyna_gallery.className += " gallery-exp";

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

Answer 2

为什么它会“顺利”增长？

您在脚本中执行的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