监听animation动画事件

当你需要在某个动画开始或者结束时，去触发某一个事件，那么这时候可以用到监听animation事件方法；

具体如下：

    1、-webkit-animation动画其实有三个事件：
    开始事件 webkitAnimationStart
    结束事件 webkitAnimationEnd
    重复运动事件 webkitAnimationIteration


    2、css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd;

    注意：transition,也仅仅有这一个事件。

废话不多说，直接上代码：

html代码：

<div id="div"></div>

css代码：

#div{
            width:60px;
            height:60px;
            border-radius:30px;
            background:#eee;
            margin:100px auto;
            -webkit-transition: all ease 1s;
            -moz-transition: all ease 1s;
            -ms-transition: all ease 1s;
            -o-transition: all ease 1s;
            transition: all ease 1s;
        }
        .change{
            -webkit-animation: transform_ani 1s 2 ease;
            -moz-animation: transform_ani 1s 2 ease;
            -ms-animation: transform_ani 1s 2 ease;
            -o-animation: transform_ani 1s 2 ease;
            animation: transform_ani 1s 2 ease;
        }
        @-webkit-keyframes transform_ani {
            0% {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }
            100% {
                -webkit-transform: scale(2);
                -moz-transform: scale(2);
                -ms-transform: scale(2);
                -o-transform: scale(2);
                transform: scale(2);
            }
        }
        @-moz-keyframes transform_ani {
            0% {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }
            100% {
                -webkit-transform: scale(2);
                -moz-transform: scale(2);
                -ms-transform: scale(2);
                -o-transform: scale(2);
                transform: scale(2);
            }
        }
        @-ms-keyframes transform_ani {
            0% {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }
            100% {
                -webkit-transform: scale(2);
                -moz-transform: scale(2);
                -ms-transform: scale(2);
                -o-transform: scale(2);
                transform: scale(2);
            }
        }
        @-o-keyframes transform_ani {
            0% {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }
            100% {
                -webkit-transform: scale(2);
                -moz-transform: scale(2);
                -ms-transform: scale(2);
                -o-transform: scale(2);
                transform: scale(2);
            }
        }
        @keyframes transform_ani {
            0% {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }
            100% {
                -webkit-transform: scale(2);
                -moz-transform: scale(2);
                -ms-transform: scale(2);
                -o-transform: scale(2);
                transform: scale(2);
            }
        }

js代码：

var dd = document.querySelector('#div');

    dd.addEventListener("click", clickEvent, false);

    //监听transition动画结束方法
    dd.addEventListener("webkitTransitionEnd", overTran, false);
    dd.addEventListener("mozTransitionEnd", overTran, false);
    dd.addEventListener("MSTransitionEnd", overTran, false);
    dd.addEventListener("otransitionend", overTran, false);
    dd.addEventListener("transitionend", overTran, false);
    //监听animation动画开始方法
    dd.addEventListener("webkitAnimationStart", startAni, false);
    dd.addEventListener("mozAnimationStart", startAni, false);
    dd.addEventListener("MSAnimationStart", startAni, false);
    dd.addEventListener("oanimationstart", startAni, false);
    dd.addEventListener("animationstart", startAni, false);
    //监听animation动画结束方法
    dd.addEventListener("webkitAnimationEnd", overAni, false);
    dd.addEventListener("mozAnimationEnd", overAni, false);
    dd.addEventListener("MSAnimationEnd", overAni, false);
    dd.addEventListener("oanimationend", overAni, false);
    dd.addEventListener("animationend", overAni, false);
    //监听animation重复运动方法
    dd.addEventListener("webkitAnimationIteration", chongfuAni, false);
    dd.addEventListener("mozAnimationIteration", chongfuAni, false);
    dd.addEventListener("MSAnimationIteration", chongfuAni, false);
    dd.addEventListener("oanimationiteration", chongfuAni, false);
    dd.addEventListener("animationiteration", chongfuAni, false);

    function clickEvent(){
        dd.className = 'change';
        console.log('click');
    }
    function overTran(){
        console.log('TransitionEnd');
    }
    function startAni(){
        console.log('AnimationStart');
    }
    function overAni(){
        dd.className = dd.className.replace('change', ' ');
        console.log('AnimationEnd');
    }
    function chongfuAni(){
        console.log('AnimationIteration');
    }

运行如下图：

备注：虽然不常用，但是需要去理解掌握！多动手！！