如何使用jQuery等待CSS3转换结束？ [英] How to use jQuery to wait for the end of CSS3 transitions?

问题描述

我要淡出元素(将其不透明度转换为0)，然后在完成后从DOM中删除该元素。

在jQuery中，这很简单，因为您可以指定动画完成后发生的"移除"。但是，如果我希望使用CSS3转场进行动画制作，是否可以知道何时完成转场/动画？

推荐答案

对于转换，您可以使用以下命令通过jquery检测转换结束：

$("#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()方法中，以支持在所有支持它的浏览器上激发事件。

更新：

根据Duck留下的注释：您使用jQuery的.one()方法来确保处理程序只触发一次。例如：

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

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

更新2：

jQuerybind()方法已弃用，从jQuery 1.7开始首选on()方法。bind()

您还可以在回调函数上使用off()方法，以确保它只触发一次。这里有一个示例，相当于使用one()方法：

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

引用：

• .off()

• .one()

这篇关于如何使用jQuery等待CSS3转换结束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！