jQuery 如何检测 CSS3 转换和动画的完成？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-12-17 10:15:26

原创

769 人浏览过

How Can jQuery Detect the Completion of CSS3 Transitions and Animations?

使用 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() 的行为。

参考文献：