如何在所有动画后触发“animationEnd”回调答案

【问题标题】：how to trigger ‘animationEnd’ callback after all animation如何在所有动画后触发“animationEnd”回调
【发布时间】：2015-01-17 18:16:30
【问题描述】：

我遇到了这样的问题，我需要用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时工作一次呢？

【问题讨论】：

标签： javascript css animation sass css-animations

【解决方案1】：

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

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

【讨论】：

...所以，我需要知道所有 '.new-page{n}-play' 的动画计数？当我有 new-page1-play、new-page2-play、new- page3-play,new-page4-play.......我认为这可能不是一个好方法