CSS3动画可以触发回调吗？

CSS3 动画可以触发回调吗？

与容易支持回调的 JavaScript 动画不同，CSS3 动画最初缺乏此功能。不过，通过使用事件监听器，现在可以实现 CSS3 动画的回调。

基于事件的回调实现

CSS3 实现回调的关键就是将动画识别为可以监听的事件。通过向相关 DOM 元素添加事件监听器，您可以在动画完成时执行回调。

jQuery 事件绑定

使用 jQuery，您可以将事件监听器绑定到动画元素如下：

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

这将事件侦听器绑定到三种可能的事件类型： oanimationend、animationend 和 webkitAnimationEnd。初始事件带有供应商前缀，以确保与各种浏览器的兼容性。

纯 JavaScript 事件绑定

如果您不想使用 jQuery，可以使用纯 JavaScript添加事件侦听器：

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

此方法达到相同的结果，但使用本机 JavaScript代码。

演示和浏览器兼容性

此回调实现的现场演示可在 http://jsfiddle.net/W3y7h/ 上找到。请注意，虽然大多数现代浏览器支持这些事件类型，但始终建议在实现回调时检查跨浏览器兼容性。

以上是CSS3动画可以触发回调吗？的详细内容。更多信息请关注PHP中文网其他相关文章！