如何偵測 CSS 轉換是否完成？

CSS Transition 回呼

問題：

問題：

是否可以在以下情況下收到通知CSS 轉場有完成？

答案：

• 是的，如果瀏覽器支持，當轉換結束時會觸發事件。不過，具體事件會因瀏覽器而異：
• Webkit 瀏覽器（Chrome、Safari）：webkitTransitionEnd
• Firefox：transitionend

IE9 : :

歌劇： 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轉換函數」的答案中討論的方法來取得名稱瀏覽器？ 」

此問題也與「CSS3 轉換事件」有關。

以上是如何偵測 CSS 轉換是否完成？的詳細內容。更多資訊請關注PHP中文網其他相關文章！