Question

很多人需要重启他们的CSS3动画;好吧，我想要完全相反：

如果我通过添加适当的css类来启动动画，则动画开始;如果我使用一系列parentNode.insertBefore调用对容器进行排序（并重用相同的节点实例），则动画每次都会重新启动。

我能做些什么来阻止这种行为吗？

以下是显示此行为的小提琴：http://jsfiddle.net/v66G5/17/

单击Add all，让动画播放几秒钟，然后单击shuffle：任何移动的节点都会重新启动动画。

container.insertBefore(node, childrenClone[Math.floor(Math.random() * childrenClone.length)]);

Answer 1

为什么要操纵DOM元素，当你可以改变他们的CSS位置时呢？

http://jsfiddle.net/v66G5/19/

children.each(function() {
    var $node = $(this),
        $node2 = $(children[Math.floor(Math.random() * children.length)]),
        tmp = $node.position().top;

    $node.css("top", $node2.position().top + 'px');
    $node2.css("top", tmp + 'px');
});

Answer 2

取自http://dev.w3.org/csswg/css3-animations/

在解析样式后，将在文档加载后通过修改样式在元素上指定的动画。这可能是伪样式规则（例如悬停）的情况，也可能是脚本引擎将控制权返回给浏览器的情况（在脚本应用样式的情况下）。

如果元素具有引用有效关键帧规则的“animation-name”值，则动画将应用于元素。动画开始后，它将一直持续到动画结束或删除“动画名称”。用于关键帧和动画属性的值在动画开始时被快照。在执行动画期间更改它们无效

删除和插入节点会导致元素重新计算样式，所以我不认为简单的css可以实现你想要的东西。

使用jQuery实现它的一种可能方法是在移除节点时拍摄不透明度和动画结束时的时间，并在插入节点后将其设置回来（即10秒动画，5秒后如果单击shuffle，从50％不透明度开始，动画持续时间为5s）

防止CSS3动画重启

2 个答案: