Tarayıcılar arasında CSS3 Geçiş işlevlerini nasıl normalleştiririm?

Webkit'in geçiş bitiş olayına webkitTransitionEnd, Firefox geçişEnd, opera oTransitionEnd olarak adlandırılır. Bunların hepsini saf JS'de ele almanın iyi bir yolu nedir? Tarayıcı koklama yapmalı mıyım? veya her birini ayrı ayrı uygulayabilir misiniz? Aklıma gelmeyen başka bir yol?

yani:

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

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

veya

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

function fn() {
   //do whatever
}

Modernizr'de geliştirilmiş bir teknik var:

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

Ardından, geçiş bitiş olayına ihtiyaç duyduğunuzda bu işlevi çağırabilirsiniz:

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

Matijs'in yorumuna göre, geçiş olaylarını tespit etmenin en kolay yolu bir kitaplıktır, bu durumda 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')
});

Kitaplıksız javascript'te biraz ayrıntılı olur:

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

function callfunction() {
   //do whatever
}

Güncelleme

Aşağıdakiler bunu yapmanın daha temiz bir yoludur ve modernizasyon gerektirmez

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

Alternatif olarak

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

Bu, Modernizr tarafından önerilen koda dayanmaktadır, ancak Opera'nın daha yeni sürümleri için ekstra etkinlikle birlikte.

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

JQuery kullanıyorsanız ve Bootstrap $.support.transition.endgeçerli tarayıcı için doğru olayı döndürür.

O edilir Bootstrap tanımlanan ve kullanılan onun animasyon geri aramaları jQuery dokümanlar bu özelliklere güvenmek değil demek olsa da,:

Bu özelliklerden bazıları aşağıda belgelenmiş olsa da, uzun bir kullanımdan kaldırma / kaldırma döngüsüne tabi değildirler ve dahili jQuery kodu artık bunlara ihtiyaç duymadığında kaldırılabilir.

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

2015 itibariyle, bu tek astar anlaşmayı yapmalıdır (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ ve Opera 12 +): -

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

Olay dinleyicisini eklemek basittir: -

element.addEventListener(transEndEventName , theFunctionToInvoke);

İkincisi, gitmenin yoludur. Her tarayıcıda bu olaylardan yalnızca biri tetiklenecek, böylece hepsini ayarlayabilirsiniz ve çalışacaktır.

İşte daha temiz bir yol

 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 kapatması, bunu yapmanız gerekmediğinden emin olmanızı sağlar. Bir elementiniz varsa:

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

goog.events.eventtype.js kaynağına bakıldığında, GEÇİŞEND, kullanıcı aracısına bakılarak hesaplanır:

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

Böyle bir kod kullanıyorum (jQuery ile)

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
}

Bu, özellik ile bağlantılı vP belirleyerek bir şeyler eklemek için JS kullanmama izin veriyor ve bir tarayıcıya çarpmadıysa sadece standardı kullanıyor. Olaylar kolayca şu şekilde bağlanmama izin veriyor:

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

jquery geçersiz kılma:

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

ve aşağıdaki gibi kullanım:

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

Kabul edilen cevap doğrudur ancak bu öğeyi tekrar tekrar oluşturmanız gerekmez ve ...

Global bir değişken oluşturun ve işlevleri ekleyin:

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