transitionend 事件

在前端开发中，我们经常需要为元素添加动画效果，以提升用户体验。而在实现动画效果时，我们经常会用到 CSS 的 transition 属性来实现简单的过渡效果。然而，当我们需要在动画结束后执行一些操作时，就需要使用到 transitionend 事件了。

什么是 transitionend 事件

transitionend 事件会在 CSS transition 结束后触发。这个事件在过渡效果完成后才会被触发，可以用来监听过渡效果的结束，并执行相应的操作。

如何使用 transitionend 事件

要使用 transitionend 事件，首先需要为元素添加 CSS transition 属性，然后通过 JavaScript 监听 transitionend 事件。

示例代码如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transitionend 事件示例</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

.box:hover {
  width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');

box.addEventListener('transitionend', () => {
  console.log('Transition ended');
});
</script>
</body>
</html>

在上面的示例中，当鼠标悬停在红色方块上时，宽度会从 100px 过渡到 200px，同时会触发 transitionend 事件，控制台会输出 "Transition ended"。

注意事项

• transitionend 事件在每次过渡完成时都会被触发，所以如果有多个过渡效果，可能会触发多次。
• 有些情况下，transitionend 事件可能不会被触发，比如在过渡效果被中断或者元素被隐藏时。

通过合理地运用 transitionend 事件，我们可以更好地控制动画效果的结束，从而提升用户体验。希望以上内容对你有所帮助！