CSS3过渡完成时回调

小编典典

CSS3过渡完成时回调

javascript

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

在jQuery中，这很简单，因为您可以指定动画完成后要执行的“删除”操作。但是，如果我希望使用CSS3过渡进行动画处理，是否可以知道过渡/动画何时完成？

阅读 618

2020-04-25

共1个答案

小编典典

对于过渡，您可以使用以下内容通过jQuery检测过渡的结束：

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

对于动画，它非常相似：

$("#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()方法已被弃用，从开始，on()最好使用method方法jQuery 1.7。bind()

您还可以off()在回调函数上使用method，以确保仅将其触发一次。这是一个等效于using one()方法的示例：

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

参考文献：

2020-04-25