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

检测 CSS3 过渡和动画的完成

使用 CSS3 动画或过渡时，会出现一个常见的挑战：确定动画或过渡何时完成。这些知识对于执行后续操作至关重要，例如从 DOM 中删除元素。

在 jQuery 中，您可以选择指定在动画完成后发生“删除”。但是，对于 CSS3 过渡或动画，有一种特定的方法来检测其端点。

过渡

对于过渡，jQuery 提供了一种监听过渡结束的方法：

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

动画

同样，对于动画，您可以使用：

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

请注意，您可以将所有以浏览器为前缀的事件字符串传递到bind()方法中，以确保跨多个浏览器支持该事件。

一次性事件处理

为了确保事件处理程序只触发一次，可以使用 jQuery 的 one() method:

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

已弃用的方法

目前，jQuery 的 bind() 方法已弃用，首选 on() 方法。您还可以在回调函数上使用 off() 来指定它只应被触发一次。这是一个示例：

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

参考文献

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

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