我想淡出一个元素(将其不透明度转换为 0),然后在完成后从 DOM 中删除该元素。
在 jQuery 中这是直截了当的,因为您可以指定“删除”在动画完成后发生。但是,如果我想使用 CSS3 过渡制作动画,是否知道过渡/动画何时完成?
最佳答案
对于过渡,您可以使用以下内容通过 jQuery 检测过渡的结束:
$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
Mozilla 有一个很好的引用:
对于动画来说非常相似:
$("#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);
});
引用资料:
关于javascript - 如何使用 jQuery 等待 CSS3 过渡结束?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9255279/