如何检测 CSS3 转换何时开始和结束？

CSS3 过渡事件

CSS3 过渡提供了一种向网页添加动画和效果的无缝方式。然而，为了有效地控制和同步这些动画，必须知道它们何时开始和结束。输入 CSS3 过渡事件。

事件类型

根据您使用的浏览器，CSS3 过渡开始或结束时会触发不同的事件：

• W3C CSS 转换草稿：

  • transitionstart（开始）
  • transitionend（结束）

• Webkit：

  • webkitTransitionEnd （结束）

• Mozilla:

  • transitionend （结束）

• 歌剧：

  • oTransitionEnd （结束）

• 互联网Explorer:

  • transitionend（结束）

监听事件

要监听 CSS3 转换事件，您需要可以使用 JavaScript 事件监听器：

element.addEventListener('transitionend', function(event) {
  // Transition completed
});

浏览器兼容性

CSS3 转换事件的可用性因浏览器而异。请参阅下表了解兼容性信息：

Browser	Transition Start Event	Transition End Event
W3C CSS Transitions Draft	Yes	Yes
Webkit	No	Yes
Mozilla	No	Yes
Opera	No	Yes
Internet Explorer	No	Yes

使用示例

以下代码演示了如何使用transitionend来监听CSS3转换的完成：

<div>

当您将鼠标悬停在 #box 元素上时，过渡会将宽度平滑地设置为 200px。当转换完成时，transitionend 事件将被触发。

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