小开

最佳答案

W3C CSS 过渡草案

CSS 转换的完成将生成相应的 DOM 事件。将为经历转换的每个属性激发一个事件。这允许内容开发人员执行与转换完成同步的操作。

Webkit

若要确定转换何时完成，请为转换结束时发送的 DOM 事件设置 JavaScript 事件侦听器函数。该事件是 WebKitTrantionEvent 的一个实例，其类型为 webkitTransitionEnd。

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

Mozilla

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

歌剧

有一种类型的转换事件 oTransitionEnd活动在工程完成后过渡期。

Internet Explorer

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

堆栈溢出: 如何规范跨浏览器的 CSS3迁移函数？

小开

在 Opera 12中，当你使用普通的 JavaScript 进行绑定时，‘ oTrantionEnd’会正常工作:

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

然而，如果您通过 jQuery 进行绑定，则需要使用‘ otrantionend’

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

如果你正在使用 Modern izr 或 bootstrap-shift. 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/

小开

更新

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

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

Https://caniuse.com/#feat=css-transitions

我正在使用 Pete 给出的方法，但是我现在已经开始使用以下方法

$(".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);

注意，它们还包括一个 SimulateTrantionEnd 函数，可能需要这个函数来确保始终发生回调。

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

小开

只是为了好玩，别这样！

$.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');
});

小开

所有现代浏览器现在支持无前缀事件:

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

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

小开

如果您只想检测单个转换端，而不使用任何 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();

它也适用于其他事件用法:)

CSS3过渡事件

W3C CSS 过渡草案

Webkit

Mozilla

歌剧

Internet Explorer