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

Question

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

 #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. How to Capture CSS3 Animation Events in JavaScript
2. jQuery .one()