如何可靠地检测跨浏览器的 CSS 转换完成情况？

事件驱动的 CSS 转换：检测转换完成

使用 CSS 转换时，通常希望在转换完成时收到通知完全的。幸运的是，现代浏览器提供了在转换结束时触发的事件，方便了回调功能的实现。

跨浏览器的事件名称

转换完成的具体事件名称因浏览器而异浏览器：

• Webkit（Chrome、Safari）： webkitTransitionEnd
• Firefox：transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

实现事件处理

实现 CSS 转换时的回调函数完成后，请按照以下步骤操作：

1. 为所使用的浏览器确定适当的转换事件名称。
2. 向正在进行转换的元素添加事件侦听器：

elemToAnimate.addEventListener(transitionEndEventName, transitionEnded);

3. 定义transitionEnded回调函数，用于在过渡时执行所需的操作

但是，需要注意的是，webkitTransitionEnd 事件并不总是一致触发。考虑到这一点，建议设置一个超时，以便在未按预期触发时调用事件处理程序。

回退超时

setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, requiredTimeForAnimation);

通过合并超时回退，即使转换事件没有执行，也可以确保执行回调fire.

获取过渡事件名称

问题“如何跨浏览器标准化 CSS3 过渡函数？”的答案中概述的方法。可用于确定当前浏览器支持的过渡事件名称。

其他资源

• 使用 CSS3 处理过渡
• CSS3 过渡活动

以上是如何可靠地检测跨浏览器的 CSS 转换完成情况？的详细内容。更多信息请关注PHP中文网其他相关文章！