重置类时，CSS动画不会重新启动

我正在使用CSS着色器+动画。 我的着色器类定义如下：

.shader{ -webkit-filter :custom(url(v.vs) mix(url(f.fs) multiply destination-over), 200 200); -webkit-animation-name: test; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1 } 

我试图通过$('#holder').addClass('shader');使用jquery动态设置/取消设置样式（着色器+动画） $('#holder').addClass('shader'); 和$('#holder').removeClass('shader');

然而，奇怪的是当我重置类时（例如，在removeClass之后调用addClass），只有着色器被重新应用但动画没有（我已经挂钩了AnimationStart事件以查看我的动画何时开始）。 任何人都知道为什么会这样，我怎么能解决它？

编辑：我在这里添加了JSfiddle代码段的简化版本。 基本上我是将动画重新应用于div两次，但实际的动画只在第一次被调用。

Answer 1

问题是，即使您删除然后重新应用动画类，也可以在单个阻塞函数的过程中执行此操作。 当您的函数退出时，渲染引擎似乎没有任何更改。

一种解决方案（您选择的解决方案）是克隆元素并销毁原始元素。 这很好，但如果你有任何事件绑定到原始元素（我认为）他们也将被销毁。

另一种方法是从元素中删除动画类，然后用非常小的延迟包装在setTimeout（）调用中重新应用类的代码，例如

 $('#holder').removeClass('shader'); setTimeout( function(){$('#holder').addClass('shader')} , 1); 

我已经调整了你的jsfiddle以使用这种方法： http ： //jsfiddle.net/HuFBN/7/

Answer 2

我想我想通了。 据此，css动画无法两次应用于同一节点（即使你有不同的动画！）。 所以我不得不克隆节点，删除原始节点，并添加回克隆节点。

Answer 3

根据2011年关于css-tricks.com的文章 ，在删除和添加类之间触发重排将重新启动动画。 示例（详细）：

 $('#holder').removeClass('shader'); $('#holder').offsetWidth = $('#holder').offsetWidth; // triggers reflow $('#holder').addClass('shader'); // restarts animation 

Answer 4

您需要重新创建元素。

 function resetAnimation(jqNode) { var clone = jqNode.clone(); jqNode.after( clone ); jqNode.remove(); jqNode[0] = clone[0]; } 

Answer 5

在应用动画后尝试使用它 – 假设“e”是您的动画元素：

 e.outerHTML = e.outerHTML; 

Answer 6

您必须删除包含动画的类，然后再次添加它。 它也应该没有.offsetWidth 。 它对我有用。 所以

 $('#id').removeClass('animationClass'); $('#id').addClass('animationClass'); // starts animation again 

应该做的伎俩。