监听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);
js控制css3动画触发-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("mozAni
mationIteration", 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 = place('change', ' ');
console.log('AnimationEnd');
}
function chongfuAni(){
console.log('AnimationIteration');
}
运⾏如下图：
备注：虽然不常⽤，但是需要去理解掌握！多动⼿！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。