JS如何监听CSS 动画结束

最新推荐文章于 2025-05-28 15:49:51 发布

转载最新推荐文章于 2025-05-28 15:49:51 发布 · 2k 阅读

JAVASCRIPT 专栏收录该内容

83 篇文章

订阅专栏

本文介绍如何使用JS监听CSS3 transitionEnd事件，实现动画结束后执行回调。通过实例代码演示了当鼠标移入元素触发动画时，如何监听并响应transitionEnd事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用描述

在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作，所以需要监听动画结束进行回调。JS提供了以下事件用于监听动画的结束，简单总结学习下。

CSS3动画监听事件

transitionEnd事件

ransitionEnd事件会在CSS transition动画结束后触发。

动画结束后触发监听事件

<!DOCTYPE html>
<html>
<head>
    <title>transtionend demo</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        .demo{
            margin:100px;
            width:100px;
            height: 100px;
            background-color: #ddc;
            transition: all 0.5s ease-out;
        }
        .demo:hover{
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="demo" class="demo">
        鼠标移入
    </div>
    <script type="text/javascript">
        var element = document.getElementById('demo')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
    </script>
</body>
</html>