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

CSS3 トランジションとアニメーションの完了の検出

CSS3 アニメーションまたはトランジションを操作する場合、アニメーションまたはトランジションがいつ終了したかを判断するという共通の課題が発生します。この知識は、DOM からの要素の削除など、後続のアクションを実行する場合に非常に重要です。

jQuery では、アニメーションの完了後に「削除」が行われるように指定するオプションがあります。ただし、CSS3 トランジションまたはアニメーションの場合、そのエンドポイントを検出する特定の方法があります。

トランジション

トランジションの場合、jQuery はトランジションの終了をリッスンするメソッドを提供します。

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

アニメーション

同様に、アニメーションについても次のことができます。 use:

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

イベントが複数のブラウザ間で確実にサポートされるように、ブラウザの接頭辞が付いたすべてのイベント文字列を binding() メソッドに渡すことができることに注意してください。

ワンタイム イベント処理

イベント ハンドラーが 1 回だけトリガーされるようにするには、jQuery の one() を使用できます。 Method:

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

非推奨のメソッド

現在、jQuery の binding() メソッドは非推奨であり、on() が優先されます。コールバック関数で off() を使用して、コールバック関数を 1 回だけ起動するように指定することもできます。以下に例を示します。

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

参照

• [jQuery .off() メソッド](https://api.jquery.com/off/)
• [jQuery .one()メソッド](https://api.jquery.com/one/)

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