animationend 事件

在前端开发中，我们经常会使用动画效果来增强用户体验。而在使用 CSS 动画时，我们通常会碰到一个问题：如何在动画结束时触发某些操作？这就是我们今天要介绍的主题——animationend 事件。

animationend 事件简介

animationend 事件是一个 CSS 动画事件，它会在 CSS 动画结束时触发。通过监听该事件，我们可以在动画完成后执行一些 JavaScript 代码，比如修改元素样式、调用其他方法等。

如何使用 animationend 事件

要使用 animationend 事件，我们需要先定义一个 CSS 动画，并为要应用动画的元素添加相应的样式。然后通过 JavaScript 监听 animationend 事件，即可在动画结束时执行我们想要的操作。

下面是一个简单的示例代码：

// 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>Animation End Event</title>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: slidein 2s forwards;
    }

    @keyframes slidein {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }
</style>
</head>
<body>
<div class="box" id="myBox"></div>

<script>
    const box = document.getElementById('myBox');
    box.addEventListener('animationend', () => {
        box.style.backgroundColor = 'blue';
    });
</script>
</body>
</html>

在这个示例中，我们定义了一个名为 slidein 的 CSS 动画，它会使元素从左侧滑入。在 JavaScript 中，我们监听了 animationend 事件，并在事件触发时将元素的背景颜色修改为蓝色。

注意事项

1. animationend 事件会在每次动画播放完成时触发，如果动画循环播放，事件也会被触发多次。
2. 如果动画被中途取消（比如通过 animation-play-state 属性），animationend 事件也会被触发。
3. animationend 事件是一个冒泡事件，所以可以通过事件委托的方式来监听父元素上的动画结束事件。

通过使用 animationend 事件，我们可以更加灵活地控制动画效果，在动画结束时执行一些操作，为用户提供更好的交互体验。希望这篇文章对你有所帮助！