ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery を使用して CSS3 トランジションとアニメーションの終了を監視する方法

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

DDD
リリース: 2024-11-08 02:45:02
オリジナル
1031 人が閲覧しました

How to Monitor the End of CSS3 Transitions and Animations with jQuery?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート