重置类时，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');和$('#holder').removeClass('shader');使用jquery动态设置/取消设置样式（着色器+动画）

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

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

Answer 1

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

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

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

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

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

Answer 2

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

Answer 3

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

$('#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

应该做的伎俩。

Answer 7

触发回流的方法：

  element.classList.remove("class");
  element.scrollBy(0, 0);
  element.classList.add("class");

在严格模式下工作！不需要对只读值进行写操作！不需要全新的功能！一行又去！ :)