11

我正在使用 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 两次，但实际动画只在第一次被调用。

4

9 回答 9

26

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

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

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

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

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

于 2013-05-17T23:42:24.113 回答
5

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

$('#holder').removeClass('shader');
$('#holder').offsetWidth = $('#holder').offsetWidth; // triggers reflow
$('#holder').addClass('shader'); // restarts animation
于 2014-06-06T15:04:42.873 回答
4

我想我想通了。根据this，css动画不能两次应用于同一个节点（即使你有不同的动画！）。所以我不得不克隆节点，删除原始节点，然后重新添加克隆节点。

于 2013-04-17T05:19:07.230 回答
1

您需要重新创建元素。

function resetAnimation(jqNode) {
   var clone = jqNode.clone();
   jqNode.after( clone );
   jqNode.remove();
   jqNode[0] = clone[0];
}
于 2015-10-09T19:24:43.620 回答
0

在应用动画后尝试使用它 - 假设“e”是您的动画元素：

e.outerHTML = e.outerHTML;
于 2015-04-29T15:14:43.050 回答
0

我很高兴听到对我的方法使用的任何批评，requestAnimationFrame因为我没有看到其他人使用它：

element.classList.add("class");
window.requestAnimationFrame(() => element.classList.remove("class"));
于 2020-06-04T18:04:37.693 回答
0

触发回流的方法：

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

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

于 2019-03-28T22:04:10.160 回答
0

使用这个简单的代码，您可以做到（您必须使用触发回流.width()）：

$('#holder').removeClass('shader');
$('#holder').width();
$('#holder').addClass('shader');
于 2021-06-06T20:55:16.907 回答
-1

您肯定必须删除包含动画的类，然后再次添加它。它也应该在没有.offsetWidth. 它对我有用。所以

$('#id').removeClass('animationClass');
$('#id').addClass('animationClass'); // starts animation again

应该做的伎俩。

于 2017-06-10T23:03:20.703 回答