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

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