如何使用 JavaScript 在不同瀏覽器之間規範 CSS3 轉換結束事件？

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

問題陳述：

問題陳述：

問題陳述：

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];
    }
  }
}

解決方案：

為每個瀏覽器實現單獨的事件監聽器效率低且乏味。相反，可以使用 Modernizr 中提出的更優雅的解決方案：

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

此函數透過建立元素並迭代潛在的事件名稱來檢查目前瀏覽器中支援的轉換事件。它會在找到時傳回適當的事件名稱。

要使用此解決方案：此方法可確保跨瀏覽器相容性並避免瀏覽器嗅探或多個事件分配。

以上是如何使用 JavaScript 在不同瀏覽器之間規範 CSS3 轉換結束事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！