重置类时CSS动画不重新启动 [英] CSS animation doesn't restart when resetting class

问题描述

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

I am using CSS shader + animation. My shader class is defined as follows:

.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事件，以查看我的动画何时开始）。任何人都知道为什么会这样，我该如何解决？

However, the weird thing is when I reset the class (e.g., calling addClass after removeClass), only the shader gets reapplied but the animation doesn't (I have hooked the AnimationStart event to see when my animation starts). Anyone know why this is the case and how I can solve it?

编辑：
我添加了一个简化的JSfiddle代码片段这里。

推荐答案

我在第一次使用动画时，认为我想出来了。根据此，css动画无法应用于同一节点两次（甚至如果你有不同的动画！）。所以我不得不克隆节点，删除原来的，并添加回克隆节点。

I think I figured it out. According to this, css animation can't get applied to the same node twice (even if you have a different animation!). So I had to clone the node, remove the original, and add back the cloned node.

这篇关于重置类时CSS动画不重新启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！