jQuery 如何检测 CSS3 转换和动画的完成？

使用 jQuery 检测 CSS3 转换和动画的完成

在 Web 开发中，通常需要在 CSS 转换或动画已经完成。然而，确定这些动画的确切结束可能很棘手。本文将演示如何使用 jQuery 检测过渡和动画的完成，确保对 DOM 操作的精确控制。

Transitions

检测动画的结束通过 jQuery 进行 CSS 转换，使用以下语法：

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

这将事件处理程序绑定到指定元素，该元素在以下情况下触发发生任何受支持的过渡结束事件。

动画

对于 CSS 动画，使用类似的方法：

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

确保一次性触发

为了防止事件处理程序多次运行，使用 jQuery 的 .one() 方法。这确保处理程序仅触发一次，之后会自动删除：

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

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

jQuery 方法弃用

请注意，.bind() 方法已被弃用在 jQuery 1.7 中。使用 .on() 代替：

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

此等效代码使用 .off() 来有效模仿 .one() 的行为。

参考文献：

• [jQuery 关闭函数](https://api.jquery.com/off/)
• [jQuery 一个函数](https://api.jquery.com/one/)

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