防止 CSS3 动画重新启动答案

【问题标题】：Prevent CSS3 Animation from restarting防止 CSS3 动画重新启动
【发布时间】：2013-01-06 05:14:09
【问题描述】：

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

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

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

这是一个显示这种行为的小提琴：http://jsfiddle.net/v66G5/17/

单击全部添加，让动画播放几秒钟，然后单击随机播放：任何移动的节点都会重新启动其动画。

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

【问题讨论】：

所以，澄清一下，您希望节点在移动后继续其动画吗？它应该停在某个关键帧吗？还是应该完全停止并回到最初的状态？
我希望它从原来的位置继续播放；这可能是css动画的限制：s
有 jsFiddle 吗？我想知道当你移动节点的父节点而不是移动节点时会发生什么？ w3.org/TR/css3-animations 还提到了一个允许暂停的animation-play-state css 属性（当然，我不知道哪些浏览器实现了它）。
使用 animation-fill-mode: forwards; 怎么样，它将在最后一个关键帧上保持动画 - 这就是你要找的吗？
@ChristoferVilander 不是真的，我已经有填充模式：无论如何。我正在寻找一种方法来防止动画在节点被删除/重新添加到其父节点时重置（重新索引时似乎就是这种情况）

标签： css css-transitions

【解决方案1】：

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

在文档加载后通过修改样式在元素上指定的动画将在样式解析时开始。这可能是在诸如悬停之类的伪样式规则的情况下立即发生，或者可能是在脚本引擎将控制权返回给浏览器时（在脚本应用样式的情况下）。

如果元素具有引用有效关键帧规则的“动画名称”值，则动画适用于元素。一旦动画开始，它就会继续，直到它结束或“动画名称”被删除。用于关键帧和动画属性的值在动画开始时进行快照。在动画执行期间更改它们没有效果

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

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

【讨论】：

【解决方案2】：

当您可以改组它们的 CSS 位置时，为什么要操作 DOM 元素？

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');
});

【讨论】：

在我的情况下，使用绝对位置不是一个选项 :-( 我正在编写一个抽象，它也应该适用于 ul/li、浮点数等。