Question

如何用JavaScript探测CSS动画是否已经完成

Answer 1

animation 动画

css :

#div{
    width:200px;
    height:200px;
    background:#f60;
    margin:100px auto;
    transition: all ease 1s;
}
.change{
    animation: transform 1s 2 ease;
}
@keyframes transform { 
    0% { transform: scale(1)}
    30% { transform: scale(2)}
    60% { transform: scale(0.5)}
    100% { transform: scale(1)}
}

js :

var div = document.querySelector('#div');
div.addEventListener('click' , function(){
  this.className = 'change';
} , false)

开始事件 animationStart

div.addEventListener('animationStart' , function(){
  console.log('动画开始执行');
} , false)

结束事件  animationEnd

div.addEventListener('animationEnd' , function(){
  console.log('动画执行结束');
  this.className = '';
} , false)

重复运动事件  animationIteration

div.addEventListener('animationIteration' , function(){
  console.log('动画开始执行');
  //只有重复动画才会触发
} , false)

transition 动画

div.addEventListener('transitionEnd' , function(){
  console.log('过度动画结束');
} , false)

过度动画只有这一个事件

Answer 2

isanime(),好像有个这个函数，记不清了，可以试试