对于无限CSS动画,是否有与animationEnd相同功能的东西?(Is there something with the same function as animationEnd for infinite CSS animations?)
所以,我有一个小脚本,发出一个警告说“完成!” 动画结束时
是否有一个函数可以为无限动画做同样的事情,即。 每次循环结束时执行一些事情?
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; } }So, I've got this small script that sends out an alert that says "done!" when an animation is finished.
Is there a function that will do the same for infinite animations, ie. execute something every time a loop ends?
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; } }最满意答案
这是使用animationiteration事件的W3C标准方法:
$('#dot1').on('animationiteration', function (e) { alert('done!') })如果您关心浏览器支持,您也可以为以下事件添加侦听器:
Webkit webkitAnimationIteration Opera oanimationiteration IE MSAnimationIterationThis is the W3C standard method of doing it, using the animationiteration event:
$('#dot1').on('animationiteration', function (e) { alert('done!') })If you care about browser support, you can add listeners for the following events too:
Webkit webkitAnimationIteration Opera oanimationiteration IE MSAnimationIteration
更多推荐
发布评论