CSS3过渡完成时回调

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(){ ... });

更新2：

jQuery

bind()

方法已被弃用，从开始，

on()

最好使用method方法

jQuery1.7

。

bind()

您还可以

off()

在回调函数上使用method，以确保仅将其触发一次。这是一个等效于using

one()

方法的示例：

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

参考文献：

• .off()

• .one()