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

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

Web 開発では、CSS トランジションまたは CSS トランジションの後にアクションを実行することが望ましいことがよくあります。アニメーションが完成しました。ただし、これらのアニメーションの正確な終了を判断するのは難しい場合があります。この記事では、jQuery を使用してトランジションとアニメーションの両方の完了を検出し、DOM 操作を正確に制御する方法を説明します。

トランジション

jQuery を介した CSS 遷移では、次の構文を使用します:

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

これは、イベント ハンドラーを指定されたオブジェクトにバインドします。サポートされているトランジション終了イベントのいずれかが発生したときにトリガーされる要素。

アニメーション

CSS アニメーションの場合、同様のアプローチが使用されます。

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

1 回限りの発火を保証する

を防ぐためイベント ハンドラーが複数回実行されるのを防ぐには、jQuery の .one() メソッドを使用します。これにより、ハンドラーは 1 回だけ起動され、その後は自動的に削除されます。

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

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

jQuery メソッドの非推奨

.bind() メソッドは非推奨になったことに注意してください。 jQuery 1.7では。代わりに .on() を使用してください:

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

この同等のコードは .off() を使用して、.one() の動作を効果的に模倣します。

参照:

• [jQuery オフ関数](https://api.jquery.com/off/)
• [jQuery One 関数](https://api.jquery.com/one/)

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