5

私は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);}
    }
4

4 に答える 4

8 
$(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()
于 2014-12-19T00:44:53.613 に答える
3

私があなたを正しく理解しているかどうかはわかりません。ともかく：

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

http://jsfiddle.net/EPv3B/

于 2013-02-25T12:42:10.367 に答える
0

a 要素をクリックするたびに、css クラスを要素に追加します。このコードを確認してください。

あなた.cometのCSSアニメーションクラスは

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

実装したい要素の数に対して同じコードを繰り返します。

于 2013-02-25T12:19:07.773 に答える
0 
$('body').on('click', '#next', function() {
     $("#cometa").addClass("rotation");
     setTimeout(function () {
    $("#cometa").removeClass('rotation');
}, 1500);
});

これは私の問題でうまくいきます。アニメーション時間が終了したら、そのクラスを削除します。

于 2013-02-25T12:43:14.410 に答える