当CSS3转换完成时callback

我想淡出一个元素(将其不透明度转换为0),然后完成从DOM中删除元素。

在jQuery中,这是非常简单的,因为您可以在animation完成后指定“删除”。 但是,如果我希望使用CSS3转换进行animation制作,无论如何要知道转换/animation何时完成?

对于转换,您可以使用以下方法通过jQuery检测转换的结束:

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

Mozilla有一个很好的参考:

https://developer.mozilla.org/en/CSS/CSS_transitions#Detecting_the_completion_of_a_transition

对于animation非常相似:

 $("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... }); 

请注意,您可以同时将所有浏览器预定义的事件string传递给bind()方法,以支持在支持该事件的所有浏览器上触发事件。

更新:

根据Duck留下的评论:你使用jQuery的.one()方法来确保处理器只触发一次。 例如:

 $("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... }); $("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... }); 

更新2:

jQuery的bind()方法已经被弃用,而on()方法是jQuery 1.7首选。 bind()

你也可以在callback函数中使用off()方法来确保它只被触发一次。 这是一个相当于使用one()方法的例子:

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

参考文献:

  • .off()

  • .one()

另一个select是使用jQuery Transit Framework来处理你的CSS3转换。 转换/效果在移动设备上performance良好,并且您不必在CSS文件中添加一行混乱的CSS3转换以执行animation效果。

这里是一个例子,当你点击一个元素的不透明度时,它会被转换为0,一旦转换完成就会被移除。

 $("#element").click( function () { $('#element').transition({ opacity: 0 }, function () { $(this).remove(); }); }); 

JS小提琴演示

对于任何人来说,这可能是方便的,这里是一个jQuery依赖函数,我成功地通过CSS类应用CSSanimation,然后从之后得到callback。 它可能无法正常工作,因为我在Backbone.js应用程序中使用它,但可能有用。

 var cssAnimate = function(cssClass, callback) { var self = this; // Checks if correct animation has ended var setAnimationListener = function() { self.one( "webkitAnimationEnd oanimationend msAnimationEnd animationend", function(e) { if( e.originalEvent.animationName == cssClass && e.target === e.currentTarget ) { callback(); } else { setAnimationListener(); } } ); } self.addClass(cssClass); setAnimationListener(); } 

我用它有点像这样

 cssAnimate.call($("#something"), "fadeIn", function() { console.log("Animation is complete"); // Remove animation class name? }); 

来自http://mikefowler.me/2013/11/18/page-transitions-in-backbone/的原创想法;

这似乎很方便: http : //api.jqueryui.com/addClass/


更新

经过上面的代码和其他选项的努力,我会build议非常谨慎的任何倾听CSSanimation结束。 随着多个animation的进行,这可以非常快速地收听事件。 我强烈build议像GSAP这样的animation库,每一个animation,甚至小的。

目前接受的答案在Chrome中为animation激发两次。 大概这是因为它识别webkitAnimationEnd以及animationEnd 。 以下绝对只会触发一次:

 /* From Modernizr */ function whichTransitionEvent(){ var el = document.createElement('fakeelement'); var transitions = { 'animation':'animationend', 'OAnimation':'oAnimationEnd', 'MSAnimation':'MSAnimationEnd', 'WebkitAnimation':'webkitAnimationEnd' }; for(var t in transitions){ if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){ return transitions[t]; } } } $("#elementToListenTo") .on(whichTransitionEvent(), function(e){ console.log('Transition complete! This is the callback!'); $(this).off(e); });