2

这是一个例子：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().

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

4

1 回答 1

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

于 2013-05-26T14:33:26.767 回答