javascript - 如何使用 jQuery 等待 CSS3 过渡结束？

Question

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

在 jQuery 中这是直截了当的，因为您可以指定“删除”在动画完成后发生。但是，如果我想使用 CSS3 过渡制作动画，是否知道过渡/动画何时完成？

Answer 1

对于过渡，您可以使用以下内容通过 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:

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

您也可以在回调函数上使用 off() 方法来确保它只会被触发一次。这是一个等效于使用 one() 方法的示例:

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

引用资料:

• .off()

• .one()