如何使用 jQuery 检测 CSS3 转换和动画的结束？

利用 CSS3 转换：使用 jQuery 检测完成

使用 CSS3 转换为元素设置动画时，有必要知道它们结束的准确时刻执行后续操作。与 jQuery 动画不同，CSS3 过渡没有内置完成回调。

捕获过渡结束事件

为了检测过渡的结束，jQuery 提供了以下功能脚本：

<code class="javascript">$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });</code>

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

<code class="javascript">$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

通过传递所有带前缀的事件字符串，此脚本将在多个浏览器上运行。

使用 .one() 进行单次触发

为了确保事件处理程序仅触发一次，您可以使用 jQuery 的 .one() 方法而不是 .bind():

<code class="javascript">$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

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

弃用和现代方法

jQuery 的 .bind() 方法现已弃用。首选方法是 .on()，它与 ​​.off() 结合使用。这是一个示例：

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

此方法确保回调函数仅执行一次。

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