监听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');
}