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

jQuery での CSS3 トランジションとアニメーションの完了の監視

Web 開発では、要素をフェードアウトしてから要素を削除することが望ましいことがよくあります。アニメーション完了時の DOM。これは jQuery のアニメーション機能を使用すれば簡単ですが、これを CSS3 トランジションに拡張するには、その結論を検出するメカニズムが必要です。

ありがたいことに、jQuery はこの問題に対処する手段を提供します。

トランジション

jQuery 経由で CSS 遷移の終了を検出するには、次のイベント バインダーを利用します:

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

Mozilla は https://developer.mozilla.org/en でこれについてさらに詳しく説明しています。 -US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

アニメーション

アニメーションの場合、アプローチは同様です:

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

注意すべき重要な点は、すべてのブラウザー接頭辞付きイベント文字列で binding() メソッドを同時に使用することにより、この機能ですべてのブラウザーを確実にサポートできることです。

イベント処理の最適化

ハンドラーの起動を 1 回に制限するには、次のように jQuery の .one() メソッドを使用します。

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

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

メソッドの非推奨と最新の代替手段

jQuery 1.7 では、on() メソッドが優先され、jQuery の binding() メソッドが非推奨になったことを認識する価値があります。さらに、次の例で示すように、コールバック関数内で off() メソッドを利用して 1 回限りの実行を保証できます。

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

このアプローチは、one() メソッドを使用するのと同じ効果があります。 .

追加リソース

• [.off()](https://api.jquery.com/off/)
• [.one()](https://api.jquery.com/one/)

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