在CSS转换callback
是否有可能得到一个通知（如callback），当CSS过渡已经完成？
我知道Safari实现了一个webkitTransitionEndcallback，你可以直接附加到转换的元素。
他们的例子（重新格式化成多行）：
box.addEventListener( 'webkitTransitionEnd', function( event ) { alert( "Finished transition!" ); }, false ); 是的，如果浏览器支持这样的事情，那么在转换完成时会触发一个事件。 然而，实际的事件，浏览器之间不同：
- Webkit浏览器（Chrome，Safari）使用
webkitTransitionEnd - Firefox使用
transitionend - IE9 +使用
msTransitionEnd - Opera使用
oTransitionEnd
但是，你应该知道， webkitTransitionEnd并不总是发射！ 这已经引起了我很多次，似乎如果animation不会对元素产生影响就会发生。 为了解决这个问题，如果事件处理程序没有像预期的那样触发，那么使用超时来触发事件处理程序是有意义的。 关于这个问题的博客文章可以在这里find： http : //www.cuppadev.co.uk/the-trouble-with-css-transitions/ < – 500内部服务器错误
考虑到这一点，我倾向于在一段代码中使用这个事件，看起来有点像这样：
var transitionEndEventName = "XXX"; //figure out, eg "webkitTransitionEnd".. var elemToAnimate = ... //the thing you want to animate.. var done = false; var transitionEnded = function(){ done = true; //do your transition finished stuff.. elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false); }; elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false); //animation triggering code here.. //ensure tidy up if event doesn't fire.. setTimeout(function(){ if(!done){ console.log("timeout needed to call transition ended.."); transitionEnded(); } }, XXX); //note: XXX should be the time required for the //animation to complete plus a grace period (eg 10ms)
注意：要获得转换事件的最终名称，您可以使用发布的方法作为答案： 如何规范化跨浏览器的CSS3转换函数？ 。
注：这个问题也涉及到： – CSS3转换事件
我正在使用下面的代码，比试图检测浏览器使用哪个特定的结束事件要简单得多。
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() { //do something });
另外如果你使用引导，那么你可以简单地做
$(".myClass").one($.support.transition.end, function() { //do something });
这是因为它们在bootstrap.js中包含以下内容
+function ($) { 'use strict'; // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) // ============================================================ function transitionEnd() { var el = document.createElement('bootstrap') var transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd otransitionend', 'transition' : 'transitionend' } for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return { end: transEndEventNames[name] } } } return false // explicit for ie8 ( ._.) } // http://blog.alexmaccaw.com/css-transitions $.fn.emulateTransitionEnd = function (duration) { var called = false, $el = this $(this).one($.support.transition.end, function () { called = true }) var callback = function () { if (!called) $($el).trigger($.support.transition.end) } setTimeout(callback, duration) return this } $(function () { $.support.transition = transitionEnd() }) }(jQuery);
jQuery.transit插件是CSS3转换和转换的一个插件，可以从脚本调用CSSanimation并给你一个callback。
