Rappel sur la transition CSS

Je sais que Safari met en œuvre un webkitTransitionEnd de rappel que vous pouvez joindre directement à l'élément avec la transition.

Leur exemple (reformaté à lignes multiples):

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

Je suis en utilisant le code suivant, est beaucoup plus simple que d'essayer de détecter des cas un navigateur utilise.

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

---

Alternativement, si vous utiliser bootstrap, alors vous pouvez simplement faire

$(".myClass").one($.support.transition.end,
function() {
 //do something
});

C'est parce qu'ils incluent les éléments suivants dans 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 (  ._.)
  }

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

  $(function () {
    $.support.transition = transitionEnd()
  })

}(jQuery);

Cela peut facilement être atteint avec la transitionend Événement voir la documentation ici
Un exemple simple:

JS:

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
	this.innerHTML = "Transition event ended";
}

CSS:

#button {transition: top 2s; position: relative; top: 0;}

HTML:

<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>