javascript - 如何在所有动画之后触发 ‘animationEnd’ 回调

Question

我遇到这样的问题，我需要用css3来播放动画，这是我的sass代码:

.new-page4-play{
  .contain_doll{
    @-webkit-keyframes contain_doll_play{xxxx}
    -webkit-animation:contain_doll_play 1s;
  }
  .contain_photo{
      @-webkit-keyframes contain_photo_play{xxxx}
      -webkit-animation:contain_doll_play 2s linear 2s;
    .icon{
      @-webkit-keyframes contain_icon_play{xxxx}
      -webkit-animation:contain_doll_play 3s linear 3s;
    }
  }
}

我想在所有动画完成后触发回调(应该是 6s)，但是

document.querySelector('.new-page4-play').addEventListener("webkitAnimationEnd",callback)

会触发回调3次，分别是1s、4s和6s，那么我应该怎么做才能让回调在6s时触发一次？

Answer 1

添加一个可以被回调函数访问的计数器变量

a=0;
someName(){
  a++;
  if(a==3){
     //do something
  } 
}