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

jQuery を使用した CSS3 トランジションの待機

CSS3 トランジションを使用して要素をアニメーション化する場合、アニメーションがいつ完了したかを判断するのが難しい場合があります。アニメーションの終了時にコールバックを許可する jQuery アニメーションとは異なり、CSS3 トランジションにはそのようなメカニズムがありません。ただし、jQuery を使用した解決策があります。

トランジション完了の検出

jQuery は、CSS3 トランジションの終了を検出するために使用できるイベント リスナーを提供します。これらのリスナーは次のとおりです:

• transitionend
• webkitTransitionEnd
• oTransitionEnd
• MSTransitionEnd

これらのイベントにバインドできます必要なセレクターでbind()メソッドを使用します。 追跡。例:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

アニメーションの完了の検出

トランジションと同様に、アニメーションも jQuery イベントを使用して検出できます。リスナー:

• animationend
• webkitAnimationEnd
• oAnimationEnd
• MSanimationEnd

bind() メソッドを次のように使用します。 before:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

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

イベント ハンドラーが 1 回だけ起動するようにするには、jQuery の .one() メソッドを使用します:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

ベスト プラクティス

• ブラウザーの接頭辞が付いたすべてのイベント文字列をbind()に渡します。すべてのブラウザをサポートするメソッドです。
• ハンドラーが複数回起動しないようにするには、.one() を使用します。
• jQuery の binding() メソッドは非推奨です。バージョン 1.7 では、on() が推奨されます。
• あるいは、off() を使用して、イベントの起動後にコールバックを切り離し、イベントが 1 回だけ起動するようにします。

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