如何检测 CSS3 过渡的开始和结束？

检测 CSS3 过渡事件

CSS3 中的过渡为 Web 元素添加动态效果，从而增强其响应能力。但是，通常需要跟踪这些过渡的开始和结束，以便与其他元素或操作同步。

答案

W3C CSS 过渡草案

W3C CSS 转换草案指定为每个属性触发完成事件经历一个转变。此事件允许开发人员检测转换何时完成并执行同步操作。

Webkit

在 Webkit 中，可以为 webkitTransitionEnd 事件设置事件监听函数。此事件在转换结束时触发。

box.addEventListener('webkitTransitionEnd', function( event ) { alert( "Finished transition!" ); }, false );

Mozilla、Opera 和 Internet Explorer

这些浏览器支持相同的 Transitionend 事件，但可能对于 Opera，前缀为“o”；对于 Internet Explorer，前缀为“webkit”。该事件在转换完成时发生。

有关 CSS 转换事件及其跨浏览器兼容性的更多信息，请参阅 Stack Overflow 上有关规范化 CSS3 转换函数的讨论。

以上是如何检测 CSS3 过渡的开始和结束？的详细内容。更多信息请关注PHP中文网其他相关文章！