CSS 过渡 - 为什么他们不会在新添加的内容的类更改上触发？答案

【问题标题】：CSS Transitions - Why won't they fire on class-change of freshly added content?CSS 过渡 - 为什么他们不会在新添加的内容的类更改上触发？
【发布时间】：2013-05-21 12:32:57
【问题描述】：

这是一个例子：http://dabblet.com/gist/5652844

我正在创建一个新元素，设置一个类，将其附加到父级并立即切换类，以便触发转换。像这样：

var div = document.createElement("div");
div.setAttribute("class", "left");
document.body.appendChild(div);
div.setAttribute("class", "right");

这些类只是设置了一个left 值，而 div 具有transition: left .5s ease;。

现在，由于某种未知原因，只有当我在第二个 setAttribute() 之前添加一个短暂的延迟（10-20 毫秒似乎有效）时才会触发转换。

我的问题是：有没有更清洁的方法来做到这一点？我试过 jQuery 的 append 和 addClass，它们显示了相同的行为。 jQuery UI 的switchClass 似乎可以工作，但没有更好的方法来代替依赖随机延迟值吗？

【问题讨论】：

我猜是因为没有延迟，浏览器就没有机会进行初始绘制，这会给元素一些过渡的地方。当 JavaScript 完成后，浏览器绘制元素，它只看到它有 right 类，而从未意识到 left。
是的，这也是我的怀疑。看起来好像元素被添加到 DOM 中 class="right"。我不认为有一个神奇的事件或回调可以让您知道元素何时在 DOM 中并完成绘制？
不，不会有回调。由于浏览器视图响应 JavaScript 的操作，但不是 JavaScript 的一部分，因此您只需让您的 JS 与 UI 配合即可达到您需要的效果。让类更改一个在短时间后发生的异步操作（就像你正在做的那样）可能是你最好的选择。

标签： javascript css css-transitions transition

【解决方案1】：

我已经修改了你的例子，你可以在这里找到我的版本：http://dabblet.com/gist/5652939

基本上，我所做的只是修改 CSS：我将“animation: toright 5s”添加到您的 div 样式（“toright”只是动画的名称，您可以在其中放置任何内容）然后我使用@keyframes 规则，像这样：

@keyframes toright
{
    from {left:50px;}
    to {left:500px;}
}

toright 当然是我给动画起的名字，所以这里可以引用。这就像引用任何页面元素，如 div、textareas 等，只有您输入 @keyframes 来指定您要写下动画的步骤。第一步是 div 有一个 50 像素的 css 属性“左”，正如您在代码中指定的那样，然后最后一步是将上面指定的属性修改为 500 像素。正如 div 属性“动画”中所指定的，转换将花费 5 秒。我希望它很清楚！欲了解更多信息，您可能需要阅读this MDN article about CSS animations

【讨论】：

哦，当然我删除了你用来触发转换的所有 JS 代码！
谢谢，这是一个非常不错的纯 CSS 解决方案！虽然我认为我可以让我的具体案例与此一起工作（而且我一定会更多地查看动画），但遗憾的是它没有解释为什么需要这些延迟。我目前正在研究各种 DOM 事件，但还没有找到合适的，所以我愿意寻求更多答案。
实际上在 Chrome 上它确实可以将超时设置为“0”，所以这可能取决于您使用的浏览器？
删除 setInterval() 包装后，您可能也不会在 Chrome 上看到任何动画。顺便说一句，到目前为止我发现的唯一真正的解决方案是滥用这样的动画：dabblet.com/gist/5653047（基于davidwalsh.name/detect-node-insertion）。我之前尝试过各种 DOM 事件，但它们似乎都触发得太早了..
哦，所以你想在没有 setTimeout() 的情况下制作 javascript 动画？当然这是不可能的，如果你想重复动画，你需要使用 setInterval() 在 Javascript 中为任何东西设置动画， setTimeout() 执行一次。如果没有这些方法，就不可能制作出漂亮的动画效果，第二次设置属性时会在几毫秒内覆盖第一次。在这种情况下你能看到的最好的就是 div 在加载时闪烁:)