首頁 > web前端 > css教學 > 如何偵測 CSS 轉換是否完成?

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

Patricia Arquette
發布: 2024-11-26 15:51:10
原創
392 人瀏覽過

How Can I Detect the Completion of a CSS Transition?

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板