Question

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

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：我为你的div风格添加了“animation：toright 5s”（“toright”只是动画的名字，你可以在那里放任何东西）然后我用了@keyframes规则，如下：

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

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

CSS过渡 - 为什么他们不会对新增内容的课程变更开火？

1 个答案: