CSS3 动画完成后是否有回调？

发布于 2024-11-12 15:48:02 字数 158 浏览 3 评论 0原文

有没有办法在css3动画的情况下实现回调函数？对于 Javascript 动画，这是可能的，但在 css3 中找不到任何方法。

我看到的一种方法是在动画持续时间之后执行回调，但这并不能确保它总是在动画结束后立即被调用。这将取决于浏览器 UI 队列。我想要一个更稳健的方法。有什么线索吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半步萧音过轻尘 2024-11-19 15:48:02

是的，有。回调是一个事件，因此您必须添加一个事件侦听器来捕获它。这是一个使用 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);

现场演示：
http://jsfiddle.net/W3y7h/

Yes, there is. The callback is an event, so you must add an event listener to catch it. This is an example with jQuery:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

Or pure js:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

Live demo:
http://jsfiddle.net/W3y7h/

回复收藏 0 原文

灼痛 2024-11-19 15:48:02

执行回调并处理 CSS3 转换/浏览器兼容性的一种简单方法是 jQuery Transit 插件。示例：

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

JS Fiddle 演示

An easy way for you to do a callback that also handles your CSS3 transitions/browser compatibilities would be the jQuery Transit Plugin. Example:

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

JS Fiddle Demo

回复收藏 0 原文

我乃一代侩神 2024-11-19 15:48:02

如果您使用 Javascript 而不是 CSS 创建动画，那么您将需要使用动画 API 来设置动画的回调 onfinish 事件。

animation = myAnimatedElement.animate([
    {transform: 'translateX(0px)'},
    {transform: 'translateX(-100px)'},
], 700);

animation.onfinish = (e) => {
    // Do something after the animation finishes
};

值得记住的是，如果动画被取消、删除或暂停，则 onfinish 事件不会触发。您可能还想根据您的需要为这些事件添加侦听器。

If you created the animation with Javascript instead of CSS then you'll want to use the Animation API to set the callback for the animation's onfinish event.

animation = myAnimatedElement.animate([
    {transform: 'translateX(0px)'},
    {transform: 'translateX(-100px)'},
], 700);

animation.onfinish = (e) => {
    // Do something after the animation finishes
};

Worth keeping in mind that if the animation is canceled, removed, or paused then the onfinish event does not fire. You may want to add listeners for those events as well depending on your needs.

回复收藏 0 原文

~没有更多了~