我正在使用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');和动态设置/取消设置样式(shader + animation)$('#holder').removeClass('shader');
$('#holder').addClass('shader');
$('#holder').removeClass('shader');
但是,奇怪的是,当我重置类时(例如,在removeClass之后调用addClass),仅重新应用了着色器,而没有应用动画(我已钩住AnimationStart事件以查看动画何时开始)。有人知道为什么会这样吗,我该如何解决?
编辑:我在这里添加了JSfiddle片段的简化版本。本质上,我将动画重新应用于div两次,但是实际的动画只是第一次被调用。
我想我知道了。根据此,CSS动画不能得到适用于同一节点两次(即使你有不同的动画!)。因此,我必须克隆节点,删除原始节点,然后重新添加克隆的节点。