javascript - CSS Transitions - 为什么它们不会在新添加内容的类更改时触发？

Question

这是一个例子: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 似乎可以工作，但除了依赖随机延迟值之外，还有更好的方法吗？

Answer 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 的 css 属性“left”为 50 px，正如您在代码中指定的那样，然后最后一步是将上面指定的属性修改为 500px。过渡将花费 5 秒，如 div 属性“动画”中指定的那样。我希望这很清楚!有关更多信息，您可能需要阅读 this MDN article about CSS animations