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 }
请注意，有时这个事件不会触发，通常在属性不改变或未触发画图的情况下。 为了确保我们总是得到一个回调，让我们设置一个手动触发事件的超时。
所有现代浏览器现在都支持前缀不变的事件：
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();
这对于其他的事件用法也很好:)
