jQuery を使用して CSS3 トランジションとアニメーションの終了を監視する方法

jQuery を使用して CSS3 トランジションとアニメーションの結果を監視する方法

不透明度トランジションを使用して要素をフェードアウトする場合、一般的に次のことを行います。完了したら要素を DOM から削除します。 jQuery では、アニメーションの完了後に削除を指定できるようにすることで、このプロセスを簡素化します。ただし、CSS3 トランジションを利用する場合はさらに困難になります。

トランジション/アニメーションの終了の検出

jQuery 経由でトランジションの終了を検出するには、次の方法を使用できます。

$("#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(){ ... });

互換性を確保するために、bind() メソッドでブラウザのプレフィックスが付いたすべてのイベント文字列を指定できます。

単一実行イベント処理

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

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

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

Bind() 非推奨

jQueryのbind()メソッドは非推奨になりました。代わりに on() を使用してください (jQuery 1.7 以降)。コールバック関数で off() を使用して、単一の起動を有効にすることもできます。 on() と off() を使用した同等の例を次に示します。

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

参照:

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

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