ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS 遷移の完了を検出するにはどうすればよいですか?

CSS 遷移の完了を検出するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-26 15:51:10
オリジナル
392 人が閲覧しました

How Can I Detect the Completion of a CSS Transition?

CSS 遷移時のコールバック

質問:

次の場合に通知を受け取ることは可能ですか? CSS トランジションには完了しましたか?

答え:

はい、ブラウザでサポートされている場合、遷移が終了するとイベントがトリガーされます。ただし、特定のイベントはブラウザによって異なります。

  • Webkit ブラウザ (Chrome、Safari): webkitTransitionEnd
  • Firefox:transitionend
  • IE9 : msTransitionEnd
  • オペラ: oTransitionEnd

追加の考慮事項:

  • webkitTransitionEnd は、特にアニメーションが要素に影響を与えない場合、常にトリガーされるとは限りません。
  • イベントが次のように発生しない場合にイベント ハンドラーが確実に呼び出されるように、タイムアウト フォールバックを推奨します。

コード例:

const transitionEndEventName = "XXX"; // Determine the appropriate event name
const elemToAnimate = ...; // Element to animate
let done = false;
const transitionEnded = () => {
  done = true;
  // Transition finished actions
  elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Trigger animation

setTimeout(() => {
  if (!done) {
    console.log("Timeout required to call transition ended.");
    transitionEnded();
  }
}, XXX); // Replace XXX with animation duration plus a grace period
ログイン後にコピー

注:

  • 遷移イベントの終了名前は、「CSS3 Transition 関数を全体的に正規化するにはどうすればよいですか」への回答で説明した方法を使用して取得できます。ブラウザ?"
  • この問題は、「CSS3 遷移イベント」にも関連しています。

以上がCSS 遷移の完了を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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