单击重新启动CSS动画

Question

您如何在点击时重新启动动画？

我有的解决方案是：

http://jsfiddle.net/anoopelias/qrwxdnst/

$("button").click(function(e) {
  $(".flexed").removeClass("slideInAnimation");
  setTimeout(function() {
      $(".flexed").addClass("slideInAnimation");
  }, 0);
});

这似乎可以在Chrome上很好地使用，但是动画只有在Firefox中才第一次出现。 做这个的最好方式是什么？

在Mozilla的开发人员页面上 ，它似乎运作良好，只是不知道他们是如何做到的，

Answer 1

我在这里对这个问题进行了两次尝试： http : //jsfiddle.net/uome7qr2/

在其中一个中，我删除了该类并添加了另一个类，该类具有另一个（相同的）动画。 您需要定义第二个动画才能使该动画起作用-如果您使用相同的动画，则该动画完全无效。

$("button.1").click(function(e) {
    $flexed = $(".flexed1");
    if ($flexed.hasClass('slideInAnimation')) {
    $flexed.removeClass("slideInAnimation");
    $flexed.addClass("si2");
  } else {
     $flexed.addClass("slideInAnimation");
     $flexed.removeClass("si2");
  }  
});

第二个使用100ms超时-我相信50ms也可以正常工作，但是您提供的链接使用100ms：

$("button.2").click(function(e) {
    $flexed = $(".flexed2");
    $flexed.removeClass("slideInAnimation");

    setTimeout(function() {
      $flexed.addClass("slideInAnimation");
    }, 100);
});

如果同时尝试它们，您会发现100ms动画非常生涩。 这个数字非常挑剔-即使长达10毫秒，该按钮也不会总是使动画可靠地重新启动，但是100毫秒它将每次重新启动。

Answer 2

该代码有效

此链接： https : //jsfiddle.net/sreejithunni/u50kg2cj/5/

$("button").click(function(e) {
  $(".flexed").removeClass("slideInAnimation");
  setTimeout(function() {
      $(".flexed").addClass("slideInAnimation");
  }, 100);
});

要在Firefox中工作，请向setTimeout函数添加100毫秒