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

Question

我在 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);}
    }

Answer 1

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

资源：

1. 如何在 JavaScript 中捕获 CSS3 动画事件
2. jQuery .one()

Answer 2

不确定我是否理解正确。反正：

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

http://jsfiddle.net/EPv3B/

Answer 3

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

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

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

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

Answer 4

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

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