Jak znormalizować funkcje przejścia CSS3 między przeglądarkami?

Zgodnie z komentarzem Matijs, najprostszym sposobem na wykrycie zdarzeń przejścia jest biblioteka, w tym przypadku 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')
});

W JavaScripcie bez biblioteki robi się trochę gadatliwy:

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

function callfunction() {
   //do whatever
}

Jeśli używasz jQuery i Bootstrap $.support.transition.end zwróci odpowiednie zdarzenie dla bieżącej przeglądarki.

Jest zdefiniowany w Bootstrap i używany w jego wywołaniach animacji , chociaż dokumenty jQuery mówią, aby nie polegać na tych właściwościach:

Chociaż niektóre z tych właściwości są udokumentowane poniżej, nie podlegają one dłuższemu cyklowi deprecacji/usuwania i mogą zostać usunięte, gdy wewnętrzny kod jQuery nie będzie ich już potrzebował.

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

Update

Poniższy sposób jest czystszy i nie wymaga modernizacji

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

Alternatywnie

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

Jest to oparte na kodzie sugerowanym przez Modernizr, ale z dodatkowym zdarzeniem dla nowszych wersji Opery.

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

W 2015 roku ta jedna linijka powinna wykonać transakcję (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ i Opera 12+): -

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

element.addEventListener(transEndEventName , theFunctionToInvoke);

Tutaj jest bardziej czystszy sposób

 function transitionEvent() {
      // Create a fake element
      var el = document.createElement("div");

      if(el.style.OTransition) return "oTransitionEnd";
      if(el.style.WebkitTransition) return "webkitTransitionEnd";
      return "transitionend";
    }

Druga to droga do wyjścia. Tylko jedno z tych zdarzeń zostanie uruchomione w każdej przeglądarce, więc możesz ustawić je wszystkie i będzie działać.

Zamknięcie Google sprawia, że nie musisz tego robić. Jeśli masz element:

goog.events.listen(element, goog.events.EventType.TRANSITIONEND, function(event) {
  // ... your code here
});

Patrząc na źródło goog.wydarzenia.typ zdarzenia.js, TRANSITIONEND jest obliczany patrząc na useragent:

// CSS transition events. Based on the browser support described at:
  // https://developer.mozilla.org/en/css/css_transitions#Browser_compatibility
  TRANSITIONEND: goog.userAgent.WEBKIT ? 'webkitTransitionEnd' :
      (goog.userAgent.OPERA ? 'oTransitionEnd' : 'transitionend'),

Używam takiego kodu (z jQuery)

var vP = "";
var transitionEnd = "transitionend";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
} else if ($.browser.mozilla) {
    vP = "-moz-";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "otransitionend"; //oTransitionEnd for very old Opera
}

To pozwala mi używać JS do dodawania rzeczy, określając VP konkatentowane z właściwością, a jeśli nie trafiło w przeglądarkę, to po prostu używa standardu. Wydarzenia pozwalają mi łatwo związać TAK:

object.bind(transitionEnd,function(){
    callback();
});

JQuery override:

(function ($) {
  var oldOn = $.fn.on;

  $.fn.on = function (types, selector, data, fn, /*INTERNAL*/ one) {
    if (types === 'transitionend') {
      types = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';
    }

    return oldOn.call(this, types, selector, data, fn, one);
  };
})(jQuery);

I użycie jak:

$('myDiv').on('transitionend', function() { ... });