如何规范跨浏览器的 CSS3 过渡结束事件

//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";

element.addEventListener(transitionend, function(){
  //do whatever
},false);

// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
   //do whatever
}

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

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

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

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

Css相关问答推荐

为什么我的Angular material css文件不工作？

如何改变图标的 colored颜色 时悬停在

转换间隙值时基于百分比的弹性元素&跳转

通过使溢出的子元素具有其宽度的100%来防止Flex元素溢出

在carousel组件上应用css转换时出现问题

隐藏div后缺少div的InnerHTML

当鼠标悬停在元素的：：第一行时，如何应用样式？

创建始终为剪辑元素的300%高度并左对齐的圆形剪辑路径

为什么在RadixUi上应用Tailwincss和自定义css类不起作用？

使用纯 CSS 访问跨度内容并设置其样式

如何减少弹性项目之间的差距

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能？

应用边框半径的 iframe 在 4 个角上有细曲线

重用 CSS 类更改一些属性

如何使用props 为 Vue 中的组件创建动态背景图像？

在 SVG 元素上方添加标签而不移动 SVG 元素

在 WooCommerce 变体 Select 中转换属性文本以大写

Angular Datepicker - 更改日期范围 Select 样式

如何倾斜元素但保持文本正常(未倾斜)

重置子元素的不透明度 - Maple Browser (Samsung TV App)