如何使用 JQuery 在每次单击时重复使用 css 设置的动画？答案

【问题标题】：How can i repeat an animation set with css, at every click using JQuery?如何使用 JQuery 在每次单击时重复使用 css 设置的动画？
【发布时间】：2013-02-10 13:56:18
【问题描述】：

我在 css 中创建了一个旋转动画，它需要 1 秒，并使用 .comet 类设置了“前进”。我怎样才能在每次点击外部元素时启动该动画？

 #carousel #big_bubble #cometa.rotation{animation:rotation 1s forwards; -moz-animation:rotation 1.5s forwards; -webkit-animation:rotation 1s forwards; -o-animation:rotation forwards 1s; }
    @-moz-keyframes rotation{
        from{transform:rotate(0deg);}
        to{transform:rotate(-360deg);}
 @-webkit-keyframes rotation{
        from{-webkit-transform:rotate(0deg);}
        to{-webkit-transform:rotate(-360deg);}
    }

【问题讨论】：

你能提供一个 FIDDLE 链接吗？
我在 CSS 上提供了动画。

标签： jquery html css animation

【解决方案1】：

每次单击 a 元素时，都会将 css 类添加到元素中。检查此代码。

如果 .comet 是你的 css 动画类，那么

$(document).ready(function(){
     $('#everybutton_element_id').click(function (e) {
            $(this).addClass('comet');
            $(this).delay(2000).removeClass('comet');
     });
});

对任何想要实现它的元素重复相同的代码。

【讨论】：

但它添加了类并保留在那里。在第二次单击动画时它不会发生。
你有很多按钮还是只有一个按钮。您要在其上触发此 css 类。
我在上面编辑了我的代码。现在使用它会正常工作。如你所愿。
我昨天提供了标签

【解决方案2】：

不确定我是否理解正确。无论如何：

$('#button').click(function() {
    var el = $('#cometa').addClass('rotation');
    setTimeout(function() {
        el.removeClass('rotation');
    }, 1000);
});

http://jsfiddle.net/EPv3B/

【讨论】：

我们在大约同一时间分享了大致相同的答案。有用。我只需要增加额外的时间来删除类 - 动画并没有非常流畅地完成，只有 1000 毫秒。谢谢你的贡献:)

【解决方案3】：

$('body').on('click', '#next', function() {
     $("#cometa").addClass("rotation");
     setTimeout(function () {
    $("#cometa").removeClass('rotation');
}, 1500);
});

这适用于我的问题。我在动画时间结束后删除该类。

【讨论】：

【解决方案4】：

$(function() {// Shorthand for $( document ).ready()
    $( ".trigger" ).click(function(e) {
        e.preventDefault();
        $(this).addClass( "animation" ).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){
            $(this).removeClass( "animation" );
        });
    });
});

资源：

【讨论】：