jQuery を使用して CSS3 トランジションとアニメーションの終了を検出するにはどうすればよいですか?

jQuery を使用して CSS3 トランジションとアニメーションの終了を検出する

CSS トランジションとアニメーションの完了時にアクションを実行することは、Web 開発中によく発生します。 。 jQuery でこれを実現するには、これら 2 つのアニメーション タイプに異なるアプローチを採用する必要があります。

遷移の処理:

遷移については、jQuery は結論を検出する便利なリスナーを提供します。遷移の:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

処理アニメーション:

同様に、アニメーションについても同様のリスナーが存在します:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

互換性のあるすべてのブラウザをサポートするために、すべてのブラウザ接頭辞が付いたイベント文字列をbind()に渡すことができます。

1 回限りのイベント起動:

ハンドラーが 1 回だけ起動するように、Duck は jQuery の .one() メソッドを使用することを提案しています:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

最新の jQuery イベントの使用:

bind() は jQuery で非推奨になったことに注意することが重要です1.7.推奨されるメソッドは on() であり、コールバック関数が 1 回だけ起動されるようにするには、off() を使用します。

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

これらのメソッドを理解することで、開発者は CSS3 の遷移とアニメーションの完了時にアクションを効果的に実行でき、より応答性が高く、没入型の Web エクスペリエンスを実現します。

以上がjQuery を使用して CSS3 トランジションとアニメーションの終了を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。