了解 CSS3 过渡事件

CSS3 过渡允许在 Web 元素上实现流畅的动画和视觉效果。为了增强用户体验并使操作与这些转换同步，监控其进度非常重要。本文解决了 CSS3 是否提供事件来检查过渡何时开始或结束的问题。

W3C CSS 过渡草案

W3C CSS 过渡草案规定CSS 转换会触发相应的 DOM 事件。对于每个转换属性，都会生成一个事件。这使开发人员能够执行与转换完成一致的操作。

WebKit

在 WebKit 下，一旦转换完成，就会触发 webkitTransitionEnd 事件。为此事件设置 JavaScript 事件侦听器允许开发人员捕获完成情况。

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

Mozilla、Opera 和 Internet Explorer

大多数浏览器支持单个事件完成转换：

• Firefox :transitionend
• Opera: oTransitionEnd
• WebKit: webkitTransitionEnd
• Internet Explorer：transitionend

在 Internet Explorer 中，transitionend 事件仅在转换成功完成时触发；过早删除它可以防止事件被触发。

将其结合在一起

通过利用基于浏览器的适当事件并使用 JavaScript 事件侦听器，开发人员可以监控CSS3 转换的进度并与其完成同步执行必要的操作。