javascript - 有没有和animationEnd功能一样的无限CSS动画的东西？

Question

因此，我得到了这个小脚本，它会发出一个提示“完成!”的警报。当动画完成时。

是否有一个函数可以对无限动画执行相同的操作，即。每次循环结束时执行一些东西？

http://jsfiddle.net/RJ55N/

JavaScript:

$('#dot1').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
   function(e) {

   alert('done!');

  });

CSS:

#dot1{
   width:10px;
    height:10px;
    background:black;
    animation:one 1s 1; 
}

@keyframes one {
    from {width:10px; height:10px; }
     to {width:100px; height:100px; }
}

Answer 1

这是 W3C 标准方法，使用 animationiteration 事件:

$('#dot1').on('animationiteration', function (e) {
  alert('done!')
})

如果您关心浏览器支持，您也可以为以下事件添加监听器:

• Webkit webkitAnimationIteration
• Opera oanimationiteration
• IE MSAnimationIteration