CSS3转换事件

是否有任何事件触发css3转换已经开始或结束?

W3C CSS转换草稿

CSS转换的完成会生成相应的DOM事件。 每一个经历过渡的财产都会被触发。 这允许内容开发者执行与完成转换同步的动作。


WebKit的

您可以为在转换结束时发送的DOM事件设置处理程序。 该事件是WebKitTransitionEvent的一个实例,其类型是JavaScript中的webKitTransitionEnd。

box.addEventListener( 'webkitTransitionEnd', function( event ) { alert( "Finished transition!" ); }, false ); 

Mozilla的

转换完成时会触发单个事件。 在Firefox中,事件是transitionend ,在Opera中是oTransitionEnd ,在WebKit中是webkitTransitionEnd

歌剧

有一种类型的转换事件可用。 oTransitionEnd事件在转换完成时发生。

IE浏览器

transitionend事件发生在转换完成时。 如果转换在完成之前被移除,则该事件不会被触发。


SO:我如何使浏览器的CSS3 Transition功能正常化?

我正在使用皮特给出的方法,但是我现在已经开始使用以下内容了

 $(".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 ( ._.) } $(function () { $.support.transition = transitionEnd() }) }(jQuery); 

注意,它们还包含一个emulateTransitionEnd函数,可能需要确保始终发生回调。

  // 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 } 

请注意,有时这个事件不会触发,通常在属性不改变或未触发画图的情况下。 为了确保我们总是得到一个回调,让我们设置一个手动触发事件的超时。

http://blog.alexmaccaw.com/css-transitions

所有现代浏览器现在都支持前缀不变的事件:

element.addEventListener('transitionend', callback, false);

适用于最新版本的Chrome,Firefox和Safari。 甚至IE10 +。

在Opera 12中,当您使用普通JavaScript进行绑定时,“oTransitionEnd”将起作用:

 document.addEventListener("oTransitionEnd", function(){ alert("Transition Ended"); }); 

但是如果你通过jQuery绑定,你需要使用'otransitionend'

 $(document).bind("otransitionend", function(){ alert("Transition Ended"); }); 

如果您使用Modernizr或bootstrap-transition.js,则可以简单地进行更改:

 var transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd otransitionend', 'msTransition' : 'MSTransitionEnd', 'transition' : 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ]; 

你可以在这里找到一些信息以及http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

只是为了好玩,不要这样做!

 $.fn.transitiondone = function () { return this.each(function () { var $this = $(this); setTimeout(function () { $this.trigger('transitiondone'); }, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000); }); }; $('div').on('mousedown', function (e) { $(this).addClass('bounce').transitiondone(); }); $('div').on('transitiondone', function () { $(this).removeClass('bounce'); }); 

如果你只是想检测一个单一的转换结束,而不使用任何JS框架这里有一个方便的实用函数:

 function once = function(object,event,callback){ var handle={}; var eventNames=event.split(" "); var cbWrapper=function(){ eventNames.forEach(function(e){ object.removeEventListener(e,cbWrapper, false ); }); callback.apply(this,arguments); }; eventNames.forEach(function(e){ object.addEventListener(e,cbWrapper,false); }); handle.cancel=function(){ eventNames.forEach(function(e){ object.removeEventListener(e,cbWrapper, false ); }); }; return handle; }; 

用法:

 var handler = once(document.querySelector('#myElement'), 'transitionend', function(){ //do something }); 

那么如果你想在某个时候取消,你仍然可以这样做

 handler.cancel(); 

这对于其他的事件用法也很好:)