如何可靠地偵測跨瀏覽器的 CSS 轉換完成情況？

事件驅動的 CSS 轉換：偵測轉換完成

使用 CSS 轉換時，通常希望在轉換完成時收到通知完全的。幸運的是，現代瀏覽器提供了在轉換結束時觸發的事件，方便了回調功能的實作。

跨瀏覽器的事件名稱

轉換完成的特定事件名稱因瀏覽器而異瀏覽器：

• Webkit（Chrome 、Safari）： webkitTransitionEnd
• Firefox：transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

Opera: oTransitionEnd

1. 實現CSS轉換時的回呼函數完成後，請依照下列步驟操作：
2. 為所使用的瀏覽器決定適當的轉換事件名稱。

elemToAnimate.addEventListener(transitionEndEventName, transitionEnded);

定義transitionEnded回呼函數，用於在過渡時執行所需的操作

但是，需要注意的是，webkitTransitionEnd 事件並不總是一致觸發。考慮到這一點，建議設定一個超時，以便在未按預期觸發時呼叫事件處理程序。

setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, requiredTimeForAnimation);

透過合併超時回退，即使轉換事件沒有執行，也可以確保執行回呼fire.

取得過渡事件名稱

問題「如何跨瀏覽器標準化CSS3過渡函數？可用於確定目前瀏覽器支援的過渡事件名稱。

其他資源
• 使用CSS3 處理過渡

以上是如何可靠地偵測跨瀏覽器的 CSS 轉換完成情況？的詳細內容。更多資訊請關注PHP中文網其他相關文章！