如何监控 CSS3 过渡的精确开始和结束？

CSS3 转换事件：精确监控转换

问题：如何精确确定 CSS3 转换何时开始或者结束？

答案：

CSS 转换完成会触发相应的 DOM 事件。每个正在进行转换的属性都会生成一个单独的事件。此机制使开发人员能够将操作与转换完成同步。

浏览器特定事件：

• W3C： 转换触发完成“过渡结束”事件。
• Webkit: 'webkitTransitionEnd' 事件表示转换结束。
• Mozilla: 'transitionend' 事件在完成时发生过渡。
• 歌剧： 'oTransitionEnd' 事件标志着转换的结束。
• Internet Explorer: 'transitionend' 事件在转换完成时触发。

示例实现:

要在 Webkit 中监视转换的完成情况，请使用以下代码：

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

注意：

过渡事件的可用性和行为可能因浏览器而异。因此，在使用这些事件时必须考虑浏览器兼容性。

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