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

运行如下图：



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