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

【问题标题】：CSS-transition on elements added dynamically via JavaScript [duplicate]通过 JavaScript 动态添加的元素的 CSS 转换 [重复]
【发布时间】：2014-03-12 08:48:32
【问题描述】：

我用这样的方式创建一个元素：

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";

根据我的理解，元素应该被创建为不可见的，并立即收到高度变化并平滑增长到 400 像素。
那么为什么它仍然会立即全高显示呢？

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

CSS3 转换延迟事件将在元素生效后触发。在这里，您已将高度设置为 0，但“li”元素仍然不在 DOM 中（因此它不存在）。

所以在将高度分配为 0px 后使其生效。即

document.body.appendChild(dynamic_gallery)

“li”现已上线，transition-duration:.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/

【讨论】：

这对我不起作用，请参阅fiddle
我已经更新了答案，请检查小提琴。
谢谢，这正是我想要的 :-)
似乎这在 FF (V. 72) 中不再起作用:(我刚刚得到了很好的结果，动画正在正确启动，延迟为 20 毫秒。

【解决方案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

【讨论】：

嗯，谢谢，我不知道渲染之前代码会完全执行，我还在学习中。但是我怎样才能达到那种效果呢？
@MoritzFriedrich 我添加了在 vanilla js 中做动画的代码