W3C CSS 过渡草案

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

Webkit

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

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

Mozilla

有一个事件在转换完成时触发。在 Firefox 中，事件是 Opera 中的 ，而在 WebKit 中是 。transitionendoTransitionEndwebkitTransitionEnd

歌剧

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

互联网浏览器

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

堆栈溢出：如何跨浏览器规范化 CSS3 过渡函数？

更新

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

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

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

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

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

或者，如果您使用bootstrap，那么您可以简单地做

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

请注意，它们还包括一个模拟TransitionEnd函数，可能需要该函数来确保回调始终发生。

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