如何使用 JavaScript 在不同浏览器之间规范 CSS3 转换结束事件？-css教程-PHP中文网

如何使用 JavaScript 在不同浏览器之间规范 CSS3 转换结束事件？

Susan Sarandon

发布： 2024-12-24 00:00:15

原创

785 人浏览过

How Can I Normalize CSS3 Transition End Events Across Different Browsers Using JavaScript?

CSS3 转换结束事件的跨浏览器标准化

问题陈述：

在不同的情况下浏览器中，CSS3过渡结束事件的触发方式不同：“webkitTransitionEnd” Webkit、Firefox 中的“transitionEnd”和 Opera 中的“oTransitionEnd”。我们如何在纯 JavaScript 中无缝处理这些变化？

解决方案：

为每个浏览器实现单独的事件监听器效率低下且乏味。相反，可以使用 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];
    }
  }
}

登录后复制

此函数通过创建元素并迭代潜在的事件名称来检查当前浏览器中支持的转换事件。它会在找到时返回适当的事件名称。

要使用此解决方案：

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

登录后复制

此方法可确保跨浏览器兼容性并避免浏览器嗅探或多个事件分配。

以上是如何使用 JavaScript 在不同浏览器之间规范 CSS3 转换结束事件？的详细内容。更多信息请关注PHP中文网其他相关文章！