在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。