如何使用jQuery来等待CSS3过渡的结束？

javascript jquery css css-transitions

2022-08-30 01:03:31

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

在jQuery中，这是直截了当的，因为您可以指定在动画完成后发生的“删除”。但是，如果我希望使用CSS3过渡进行动画处理，那么无论如何都要知道过渡/动画何时完成吗？

答案 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（）bind()on()jQuery 1.7

您还可以在回调函数上使用方法，以确保它只触发一次。下面是一个等效于使用方法的示例：off()one()

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

引用：

答案 2

有一个事件可以观察到，请参阅此处的文档，对于css动画，您可以使用该事件animationendtransitiontransitionend

不需要额外的库，这些都与vanilla JS一起工作

document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
	this.innerHTML = "transition event ended";
}

#myDIV {transition: top 2s; position: relative; top: 0;}
div {background: #ede;cursor: pointer;padding: 20px;}

<div id="myDIV" onclick="this.style.top = '55px';">Click me to start animation.</div>