本文介绍了如何使用jQuery等待CSS3转换结束？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要淡出元素(将其不透明度转换为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转换结束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！