HTML | DOM transitionend 事件

简介

transitionend 事件在 CSS 过渡完成后触发，并且只能在元素上使用。它用于识别 CSS 过渡的结束时间，并在该时间内启动 JavaScript 函数。

用法

要使用 transitionend，需要先注册一个事件侦听器，然后等待过渡完成。以下是一个示例：

const element = document.getElementById('myElement');

element.addEventListener('transitionend', () => {
  console.log('Transition complete!');
});

在这个例子中，我们在元素 myElement 上注册了 transitionend 事件。当过渡完成后，我们会在控制台上看到一条消息。

事件对象属性

transitionend 事件提供了一个事件对象，该对象具有以下属性：

• propertyName：返回转换的 CSS 属性的名称。
• elapsedTime：返回自过渡开始以来已经流逝的时间（单位为秒）。
• pseudoElement：如果过渡是在伪元素上启动的，这将返回伪元素的名称。否则，它将是一个空字符串。

以下是在事件处理程序中使用这些属性的示例：

const element = document.getElementById('myElement');

element.addEventListener('transitionend', (event) => {
  console.log(`Transition for property ${event.propertyName} completed after ${event.elapsedTime}s`);
});

在这个例子中，我们在事件处理程序中使用 propertyName 和 elapsedTime 来打印一个消息，其中包含有关完成的转换的更多信息。

浏览器支持

transitionend 事件目前得到了所有主要桌面和移动浏览器的支持。IE 9 及之前版本不支持此事件。

结论

transitionend 事件为开发人员提供了一个方便的方法来识别 CSS 过渡何时完成，并且可以在过渡结束时启动 JavaScript 函数。它特别适用于需要在过渡完成后执行其他操作的应用程序和网站。