如何在不同瀏覽器上可靠地偵測和處理 CSS3 轉換結束事件？

CSS3 轉換結束事件的跨瀏覽器標準化

跨瀏覽器處理不同的 CSS3 轉換結束事件名稱可能是一個挑戰。以下是解決此問題的一些方法：

瀏覽器嗅探

一種方法是瀏覽器嗅探，如下所示：

var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd" : "transitionend";

element.addEventListener(transitionend, function() {
  // Do something
}, false);

此方法檢查特定的瀏覽器使用者代理程式並指派適當的事件名稱。但是，它依賴於特定的預定義規則，可能無法考慮所有瀏覽器版本或潛在變更。

多個事件監聽器

或者，您可以為每個支援的瀏覽器事件名稱：

element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
  // Do something
}

此方法處理所有支援的事件，但可能會導致不必要的事件處理

Modernizr的改進技術

更強大且跨瀏覽器友好的方法是使用Modernizr 庫動態確定轉換結束事件名稱：

function transitionEndEventName() {
  var el = document.createElement('div'),
      transitions = {
        'transition':'transitionend',
        'OTransition':'otransitionend',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
      };

  for (var i in transitions) {
    if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
      return transitions[i];
    }
  }

  throw 'TransitionEnd event is not supported in this browser'; 
}

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

此技術避免了瀏覽器嗅探，並根據元素支援的CSS 動態偵測支援的事件名稱屬性。

以上是如何在不同瀏覽器上可靠地偵測和處理 CSS3 轉換結束事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！