通过JavaScript动态添加元素的CSS转换

我创建了一个元素，如下所示：

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

现在我给它分配了一个类，它给元素样式

a{height:0；transition duration:4s；}

dynamic_gallery.className = "gallery-container";  

dynamic_gallery.className += " gallery-exp";

在这一步之后，我添加了另一个样式为

{height:400px！important；}

dynamic_gallery.className = "gallery-container";  

dynamic_gallery.className += " gallery-exp";

根据我的理解，元素应该被创建为不可见的，并立即接受高度的变化，并平滑地增长到400px。
那么，为什么它仍然会立即出现在整个高度上呢？

为什么它会“平滑地”生长呢

在脚本中对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

但是：

• 这根本不会让事情顺利。要做到这一点，您必须调用许多更改（更改元素的高度而不是类），而不是只调用一个
• 使用

  ！重要信息

  几乎总是糟糕设计的标志。给你

下面是一个将元素高度从

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);
})();

（函数grow（）{
var h=（parseInt（dynamic_gallery.style.height）| | 0）+1；
动态_gallery.style.height=h+'px'；
如果（hCSS3），则元件在通电后将触发转换延迟事件。
这里您已经将height设置为0，但“li”元素仍然不在DOM中（因此它不是活动的）

所以在把高度设定为0px后，让它活起来。
即

“li”现已上线，过渡时间：.4s事件已注册

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

您将看到平滑动画

编辑：大多数浏览器需要时间使元素处于活动状态，因此我们需要0秒的超时时间使其工作

因此应该是这样

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

而不是

dyna_gallery.className += " gallery-exp";

Fiddle:
好的，谢谢，我不知道代码在渲染之前会被完全执行，我还在学习。但是我怎样才能达到那样的效果呢？@MoritzFriedrich我添加了代码，用香草JS制作动画。这对我不起作用，请查看我更新的答案。谢谢，这正是我想要的我一直在寻找：-）似乎这在FF（72节）中不再起作用了：（我刚刚得到了很好的结果，动画正确启动，延迟20毫秒。