javascript 监听CSS3动画

淡淡的烟草味﹌ 2023-06-09 10:17 6阅读 0赞

> CSS3 动画逐渐代替了 jQuery 的动画方法，从以前的通过计时器频繁修改元素样式到现在的只需要修改CSS就能实现平滑的动画。

如果有一组动画队列，或者某些方法需要在CSS3动画结束后才执行。常用的方法都是根据CSS的动画时长，然后设置一个延时器(setTimeout)来做的。但这不是一个最科学的方式。本篇文章介绍 js 监听 CSS3 动画的事件。

CSS3 实现动画分为 transition:过渡 和 animation:动画，最常见的需求就是想知道 CSS3 的动画结束。

### 效果： ###

![20191020154943343.gif][]

下方源码中会说明以上两种动画方式的动画启动和动画结束两种事件使用，源码中有详细注释，文章不再做过多说明。

### 源码： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="黄河爱浪,WEB前端河浪,jQuery插件开发者河浪">
        <meta name="description" content="公众号:web-7258,QQ:1846492969,邮箱:helang.love@qq.com">
        <title>js 监听CSS3动画</title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
                background-color: #ffffff;
                font-size: 14px;
                font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
                letter-spacing: 0;
                color: #333333;
            }
            div{
                line-height: 100px;
                width: 400px;
                border: #e5e5e5 solid 1px;
                margin: 20px auto;
                text-align: center;
                font-size: 18px;
                cursor: pointer;
            }
    
            /* 过渡 */
            div.transition{
                transition: color 1s ease 0s;
            }
    
            /* 动画 */
            div.animation{
                animation:animation1 1s ease 0s 1 normal;
                animation-fill-mode: forwards;
            }
            @keyframes animation1
            {
                from {
                    background-color: #fff;
                }
                to {
                    background-color: #00a65a;
                }
            }
        </style>
    </head>
    <body>
    <div class="transition">transition(过渡),点我看效果</div>
    <hr />
    <div>animation(动画),点我看效果</div>
    <script type="text/javascript">
        /* 获取元素 */
        var aDiv = document.querySelectorAll("div");
    
        /* 第一个 DIV 点击事件 */
        aDiv[0].addEventListener("click",function () {
            this.style.color = '#fff';
        },false);
    
        /* 第二个 DIV 点击事件 */
        aDiv[1].addEventListener("click",function () {
            this.classList.add("animation");
        },false);
    
        /* 过渡开始监听 */
        aDiv[0].addEventListener("transitionstart",function () {
            console.log("过渡开始啦！");
            this.style.backgroundColor = '#f0ad4e';
        },false);
    
        /* 过渡结束监听 */
        aDiv[0].addEventListener("transitionend",function () {
            console.log("过渡结束啦！");
        },false);
    
        /* 动画开始监听 */
        aDiv[1].addEventListener("animationstart",function () {
            console.log("动画开始啦！");
            this.style.color = '#f0ad4e';
        },false);
    
        /* 动画结束监听 */
        aDiv[1].addEventListener("animationend",function () {
            console.log("动画结束啦！");
        },false);
    </script>
    </body>
    </html>

WEB事件参考-MDN文档地址：[https://developer.mozilla.org/en-US/docs/Web/Events][https_developer.mozilla.org_en-US_docs_Web_Events]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[20191020154943343.gif]: /images/20230531/12b89976460a4d57bcf756e13c352930.png
[https_developer.mozilla.org_en-US_docs_Web_Events]: https://developer.mozilla.org/en-US/docs/Web/Events
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20230531/91adb2342b85459d862b220f4306025d.png