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次，1次，4次和6次，那么我应该怎样做才能使回调在6s时一次开启？

Answer 1

添加一个可由回调函数

访问的计数器变量

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

所有动画后如何触发'animationEnd'回调

1 个答案: