如何在 jQuery 中检测 CSS3 转换和动画的结束？

在 jQuery 中监控 CSS3 转换和动画的完成

在 Web 开发中，通常需要淡出一个元素，然后将其从动画完成时的 DOM。虽然这对于 jQuery 的动画功能来说很简单，但将其扩展到 CSS3 过渡需要一种机制来检测其结论。

幸运的是，jQuery 提供了解决此问题的途径：

过渡

要通过 jQuery 检测 CSS 转换的结束，请使用以下事件绑定器：

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozilla 在 https://developer.mozilla.org/en 上对此进行了进一步详细说明-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

动画

对于动画，方法类似：

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

需要注意的关键一点是，通过同时对所有以浏览器为前缀的事件字符串使用 bind() 方法，您可以确保支持所有具有此功能的浏览器。

优化事件处理

要将处理程序触发限制为一次，请使用 jQuery 的 .one() 方法，如下所示：

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

方法弃用和现代替代方案

值得承认的是，从 jQuery 1.7 开始，jQuery 的 bind() 方法已被弃用，取而代之的是 on() 方法。此外，您可以利用回调函数中的 off() 方法来保证一次性执行，如以下示例所示：

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

此方法与使用 one() 方法具有相同的效果.

其他资源

• [.off()](https://api.jquery.com/off/)
• [.one()](https://api.jquery.com/one/)

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