Modernizr 中使用了一种技术，经过改进：

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    for (i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            return transitions[i];
        }
    }

    //TODO: throw 'TransitionEnd event is not supported in this browser'; 
}

然后，您可以在需要转换结束事件时调用此函数：

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

根据 Matijs 评论，检测转换事件的最简单方法是使用库，在本例中为 jquery：

$("div").bind("webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done", function(){
  // Unlisten called events by namespace,
  // to prevent multiple event calls. (See comment)
  // By the way, .done can be anything you like ;)
  $(this).off('.done')
});

在无库的 javascript 中，它变得有点冗长：

element.addEventListener('webkitTransitionEnd', callfunction, false);
element.addEventListener('oTransitionEnd', callfunction, false);
element.addEventListener('transitionend', callfunction, false);
element.addEventListener('msTransitionEnd', callfunction, false);

function callfunction() {
   //do whatever
}

更新

以下是一种更简洁的方法，不需要modernizr

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

或者

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

这是基于 Modernizr 建议的代码，但对于较新版本的 Opera 有额外的事件。

http://modernizr.com/docs/#prefixed

如果您使用 jQuery，Bootstrap$.support.transition.end将为当前浏览器返回正确的事件。

它在 Bootstrap中定义并在其动画回调中使用，尽管 jQuery 文档说不要依赖这些属性：

尽管下面记录了其中一些属性，但它们不会受到长时间的弃用/删除周期的影响，并且可能会在内部 jQuery 代码不再需要它们时被删除。

http://api.jquery.com/jQuery.support/

截至 2015 年，这款单线应该可以完成交易（IE 10+、Chrome 1+、Safari 3.2+、FF 4+ 和 Opera 12+）：-

var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : 'transitionend'

附加事件侦听器很简单：-

element.addEventListener(transEndEventName , theFunctionToInvoke);