在CSS3动画完成时有回调吗？
在CSS3动画完成时有回调吗？
提问于 2011-05-31 18:51:06
有没有办法在css3动画的情况下实现回调函数？在Javascript动画的情况下，这是可能的，但在css3中找不到任何方法。
我可以看到的一种方式是在动画持续时间之后执行回调，但这并不能确保它总是在动画结束后立即被调用。这将取决于浏览器UI队列。我想要一种更健壮的方法。有什么线索吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-06-02 13:28:04
是的，有。回调是一个事件，所以您必须添加一个事件侦听器来捕获它。这是一个使用jQuery的示例：
$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() {
alert("fin")
});或者是纯js：
element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);Stack Overflow用户
发布于 2022-01-28 17:42:47
如果您使用Javascript而不是CSS创建动画，那么您将需要使用animation API来设置动画的onfinish event的回调。
animation = myAnimatedElement.animate([
{transform: 'translateX(0px)'},
{transform: 'translateX(-100px)'},
], 700);
animation.onfinish = (e) => {
// Do something after the animation finishes
};值得注意的是，如果动画被取消、删除或暂停，则onfinish事件不会触发。根据需要，您可能还想为这些事件添加侦听器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6186454
复制相关文章
相似问题