Wie normalisiere ich CSS3-Übergangsfunktionen in verschiedenen Browsern?

Das Übergangsendeereignis von Webkit heißt webkitTransitionEnd, Firefox ist TransitionEnd, die Oper ist oTransitionEnd. Was ist ein guter Weg, um sie alle in reinem JS anzugehen? Soll ich Browser schnüffeln? oder jedes einzeln implementieren? Ein anderer Weg, der mir nicht in den Sinn gekommen ist?

dh:

//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";

element.addEventListener(transitionend, function(){
  //do whatever
},false);

oder

// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
   //do whatever
}

In Modernizr wird eine Technik verwendet, die verbessert wurde:

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'; 
}

Dann können Sie diese Funktion einfach aufrufen, wann immer Sie das Übergangsende-Ereignis benötigen:

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

Laut Matijs Kommentar ist der einfachste Weg, Übergangsereignisse zu erkennen, eine Bibliothek, in diesem Fall 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')
});

In bibliothekslosem Javascript wird es etwas ausführlich:

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

function callfunction() {
   //do whatever
}

Aktualisieren

Das Folgende ist eine sauberere Methode und erfordert keine Modernisierung

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

Alternative

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

Dies basiert auf dem von Modernizr vorgeschlagenen Code, jedoch mit dem zusätzlichen Ereignis für neuere Versionen von Opera.

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

Wenn Sie jQuery verwenden, gibt Bootstrap $.support.transition.enddas richtige Ereignis für den aktuellen Browser zurück.

Es wird in Bootstrap definiert und in seinen Animationsrückrufen verwendet , obwohl die jQuery-Dokumente sagen, dass Sie sich nicht auf diese Eigenschaften verlassen sollen:

Obwohl einige dieser Eigenschaften unten dokumentiert sind, unterliegen sie keinem langen Verfalls- / Entfernungszyklus und können entfernt werden, sobald der interne jQuery-Code sie nicht mehr benötigt.

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

Ab 2015 sollte dieser Einzeiler den Deal machen (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ und Opera 12+): -

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

Das Anhängen des Ereignis-Listeners ist einfach: -

element.addEventListener(transEndEventName , theFunctionToInvoke);

Der zweite ist der richtige Weg. In jedem Browser wird nur eines dieser Ereignisse ausgelöst, sodass Sie alle festlegen können und es funktioniert.

Hier ist ein sauberer Weg

 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";
    }

Google Closure stellt sicher, dass Sie dies nicht tun müssen. Wenn Sie ein Element haben:

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

Wenn Sie sich die Quelle von goog.events.eventtype.js ansehen, wird TRANSITIONEND anhand des Benutzeragenten berechnet:

// 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'),

Ich benutze Code wie diesen (mit 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
}

Auf diese Weise kann ich JS verwenden, um Dinge hinzuzufügen, indem ich vP spezifiziere, das mit der Eigenschaft übereinstimmt, und wenn es keinen Browser trifft, wird nur der Standard verwendet. Die Ereignisse lassen mich einfach so binden:

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);

und Verwendung wie:

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

Die akzeptierte Antwort ist korrekt, aber Sie müssen dieses Element nicht immer wieder neu erstellen und ...

Erstellen Sie eine globale Variable und fügen Sie die Funktion (en) hinzu:

(function(myLib, $, window, document, undefined){

/**
 * @summary
 * Returns the browser's supported animation end event type.
 * @desc
 * @see {@link https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/}
 * @function myLib.getAnimationEndType
 * @return {string} The animation end event type
 */
(function(){
   var type;

   myLib.getAnimationEndType = function(){
      if(!type)
         type = callback();
      return type;

      function callback(){
         var t,
             el = document.createElement("fakeelement");

         var animations = {
            "animation"      : "animationend",
            "OAnimation"     : "oAnimationEnd",
            "MozAnimation"   : "animationend",
            "WebkitAnimation": "webkitAnimationEnd"
         }

         for (t in animations){
            if (el.style[t] !== undefined){
               return animations[t];
            }
         }
      }
   }
}());

/**
 * @summary
 * Returns the browser's supported transition end event type.
 * @desc
 * @see {@link https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/}
 * @function myLib.getTransitionEndType
 * @return {string} The transition end event type
 */
(function(){
   var type;

   myLib.getTransitionEndType = function(){
      if(!type)
         type = callback();
      return type;

      function callback(){
         var t,
             el = document.createElement("fakeelement");

         var transitions = {
            "transition"      : "transitionend",
            "OTransition"     : "oTransitionEnd",
            "MozTransition"   : "transitionend",
            "WebkitTransition": "webkitTransitionEnd"
         }

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

}(window.myLib = window.myLib || {}, jQuery, window, document));