重置类时,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
}

我试图使用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-tricks.com 上2011 年的一篇文章，在删除和添加类之间触发回流将重新启动动画。示例（详细）：

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

Answer 3

我想我明白了。根据this，CSS动画不能两次应用到同一个节点（即使你有不同的动画！）。所以我必须克隆节点，删除原始节点，然后添加回克隆的节点。