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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

我想我知道了。根据此，CSS动画不能得到适用于同一节点两次（即使你有不同的动画！）。因此，我必须克隆节点，删除原始节点，然后重新添加克隆的节点。

以上是 重置类时CSS动画不会重新启动 的全部内容， 来源链接： utcz.com/qa/402753.html

回到顶部