了解 CSS3 過渡事件

CSS3 過渡允許在 Web 元素上實現流暢的動畫和視覺效果。為了增強使用者體驗並使操作與這些轉換同步，監控其進度非常重要。本文解決了 CSS3 是否提供事件來檢查過渡何時開始或結束的問題。

W3C CSS 過渡草案

W3C CSS 過渡草案規定CSS 轉換會觸發對應的 DOM 事件。對於每個轉換屬性，都會產生一個事件。這使開發人員能夠執行與轉換完成一致的操作。

WebKit

在 WebKit 下，一旦轉換完成，就會觸發 webkitTransitionEnd 事件。為此事件設定 JavaScript 事件偵聽器允許開發人員捕獲完成情況。

box.addEventListener('webkitTransitionEnd', function(event) {
  alert("Finished transition!");
}, false);

Mozilla、Opera 和Internet Explorer

大多數瀏覽器支援單一事件完成轉換：

• Firefox : transitionend
• Opera: oTransitionEnd
• WebKit: webkitTransitionEnd
• Internet Explorer：transitionend

在 Internet Explorer 中，transitionend 事件僅在轉換成功完成時觸發；過早刪除它可以防止事件被觸發。

將其結合在一起

透過利用基於瀏覽器的適當事件並使用JavaScript 事件偵聽器，開發人員可以監控CSS3 轉換的進度並與其完成同步執行必要的操作。