如何跨不同浏览器可靠地检测和处理 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中文网其他相关文章！