3

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

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

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

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

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

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

2 回答 2

1

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

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

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

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

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

于 2013-02-04T17:22:07.980 回答
1

当您可以改组它们的 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');
});
于 2013-01-30T02:25:18.510 回答