时间戳

首页 > 解决方案 > 单击时重新启动 CSS 动画

javascript - 单击时重新启动 CSS 动画

问题描述

如何在单击时重新启动动画？

我的解决方案是：

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

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

这似乎适用于 Chrome，但动画仅在 Firefox 中首次出现。做这个的最好方式是什么？

它似乎在 Mozilla 的开发者页面中运行良好，只是不知道他们是如何做到的，

标签： javascriptjqueryhtmlcssanimation

解决方案

我在这里发布了两次尝试：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");
  }  
});

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

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

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

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

推荐阅读