CSS3过渡完成时回调

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

对于过渡，您可以使用以下内容通过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(){ ... });

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);
 });

参考文献：

  • .off()

  • .one()

以上是 CSS3过渡完成时回调 的全部内容， 来源链接： utcz.com/qa/420431.html

回到顶部