如何使用 jQuery 检测 CSS3 转换和动画的完成情况？

使用 jQuery 等待 CSS3 转换

使用 CSS3 转换为元素添加动画时，确定动画何时完成可能会很困难。与允许在动画完成时回调的 jQuery 动画不同，CSS3 过渡不提供这样的机制。不过，有一个使用 jQuery 的解决方案。

检测转换完成

jQuery 提供了可用于检测 CSS3 转换结束的事件侦听器。这些监听器是：

• transitionend
• webkitTransitionEnd
• oTransitionEnd
• MSTransitionEnd

您可以绑定到这些事件在您想要跟踪的选择器上使用bind()方法。例如：

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

检测动画完成

与过渡类似，也可以使用 jQuery 事件来检测动画听众：

• animationend
• webkitAnimationEnd
• oAnimationEnd
• MSAnimationEnd

使用bind()方法作为before:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

一次性事件触发

要确保事件处理程序仅触发一次，请使用 jQuery 的 .one() 方法：

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

最佳实践

• 将所有以浏览器为前缀的事件字符串传递到bind()方法中以支持所有浏览器。
• 使用 .one() 来防止处理程序多次触发。
• jQuery 的 bind() 方法已弃用；从版本 1.7 开始，首选 on()。
• 或者，在事件触发后使用 off() 分离回调，以确保它只触发一次。

以上是如何使用 jQuery 检测 CSS3 转换和动画的完成情况？的详细内容。更多信息请关注PHP中文网其他相关文章！