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

jQuery を使用した CSS3 トランジションとアニメーションの完了の検出

CSS3 を使用した要素のトランジションは、従来の JavaScript 手法よりもスムーズなアニメーションを提供します。ただし、CSS3 アニメーションを使用する場合、移行がいつ完了したかをどのように判断できるかという疑問が生じます。

jQuery は、このニーズに対するソリューションを提供します。 CSS3 遷移の終了を監視するには、次の構文を使用してイベント ハンドラーをバインドできます:

<code class="javascript">$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });</code>

同様に、CSS3 アニメーションの場合、次を使用できます:

<code class="javascript">$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

bind() メソッド内のすべてのブラウザー接頭辞付きイベント文字列を使用すると、ブラウザー間の互換性が確保されます。

ハンドラーの単一実行の確保

ハンドラーの繰り返し実行を防止するには、ハンドラーでは、jQuery の .one() メソッドを使用できます。例:

<code class="javascript">$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

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

.bind() メソッドの廃止

jQuery の binding() メソッドは、.on() に代わって廃止されました。したがって、以下を使用する必要があります。

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

このメソッドは、ハンドラーが 1 回だけ実行されることも保証します。

詳細については、次のリファレンスを参照してください。

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

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