13

私はcssコードを持っています:

body.start{-webkit-animation:srcb ease-in .4s 1;}

ウェブサイトに入ったときに一度プレイするだけです

しかし、問題はアニメーションが行われている間です

サイトのボタンが機能しない

アニメーションの完了後にボディクラス「開始」を削除するにはどうすればよいですか

または、アニメーションの再生後、クラスの遅延 x 秒を削除しますか?

4

6 に答える 6

34

transitionendイベントに (実際にはすべてに)バインドできます。

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).removeClass("start");
    }
);

遅延を実装したい場合は、クラスの削除操作をqueue()できます。

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).delay(1000).queue(function() {  // Wait for 1 second.
            $(this).removeClass("start").dequeue();
        });
    }
);

注: on()は jQuery 1.7 以降にのみ存在します。古いリリースを使用している場合、上記のコードを機能させるには、代わりにbind()を使用する必要があります。

于 2012-12-14T18:52:56.400 に答える
15

試す

webkitAnimationEnd oanimationend msAnimationEnd animationend

それ以外の

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

これは私にとってはうまくいきました。

于 2013-03-29T11:24:32.687 に答える
2

おそらく別の方法ですか？

$(window).load(function(){
    setTimeout(function(){
        $('body.start').removeClass('start')
    }, 4000);
});
于 2012-12-14T18:52:41.417 に答える
1

コードは次のとおりです。

var div = document.querySelector('div');

function callback() {
    div.classList.remove('start'); // or modify div.className
}

div.addEventListener("webkitAnimationEnd", callback, false);

jsbin でこのライブの例を確認してください。

あなたのアニメーションと私のソリューションは、webkit ベースのブラウザーでのみ機能することに注意してください。実稼働環境では、他のブラウザーを考慮に入れ、接頭辞のないソリューションを提供することが必須です。

于 2012-12-14T18:58:56.923 に答える