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

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-20ms似乎有效)时，过渡才会触发。

我的问题是:有没有更干净的方法来做这件事?我尝试了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;}
}

当然是我给动画起的名字，所以这里可以引用它。这就像引用任何页面元素，如div, textareas等，只有你用@keyframes来指定你要写下动画的步骤。第一步是将div的css属性"left"设置为50px，正如您在代码中指定的那样，然后最后一步是将上面指定的属性修改为500px。正如div属性"animation"所指定的那样，过渡将持续5s。我希望它是清晰的!要了解更多信息，您可能需要阅读这篇关于CSS动画的MDN文章