javascript - 重置类时 CSS 动画不会重新启动

Question

我正在使用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').removeClass('shader');

但是，奇怪的是，当我重置类时(例如，在removeClass之后调用addClass)，只有着色器被重新应用，但动画没有被重新应用(我已经挂接了AnimationStart事件来查看动画何时开始)。有人知道为什么会出现这种情况以及我该如何解决它吗？

编辑:我添加了 JSfiddle 片段 here 的简化版本。本质上，我将动画重新应用到 div 两次，但实际动画仅在第一次被调用。

Answer 1

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

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

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

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

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