css - 防止 CSS3 动画重新启动

Question

很多人需要重新启动他们的 CSS3 动画；好吧，我想要完全相反的东西:

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

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

这是一个展示这种行为的 fiddle :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');
});