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