tablas - llamar funcion javascript html sin evento

¿Cómo normalizo las funciones de transición de CSS3 en los navegadores?

Question

El evento final de transición de Webkit se llama webkitTransitionEnd, Firefox es transitionEnd, opera es oTransitionEnd. ¿Cuál es una buena forma de abordarlos a todos en JS puro? ¿Debo hacer sniffing de navegador? o implementar cada uno por separado? ¿Alguna otra forma que no me ha ocurrido?

es decir:

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

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

o

//asigning an event listener per browser
element.addEventListener(webkitTransitionEnd, function(){callfunction()},false);
element.addEventListener(oTransitionEnd, function(){callfunction()},false);
element.addEventListener(transitionEnd, function(){callfunction()},false);

function callfunction() {
   //do whatever
}

Answer 1

A partir de 2015, este one-liner debería hacer el trato (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ y Opera 12 +): -

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

Adjuntar el oyente del evento es simple: -

element.addEventListener(transEndEventName , theFunctionToInvoke);

Answer 2

Aquí hay una manera más limpia

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

Answer 3

El cierre de google se asegura de que no tengas que hacer esto. Si tienes un elemento:

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

mirando la fuente de goog.events.eventtype.js, TRANSITIONEND se calcula al observar el agente de uso:

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

Answer 4

El segundo es el camino a seguir. Solo uno de esos eventos se activará en todos los navegadores, por lo que puede configurarlos y funcionará.

Answer 5

Hay una técnica utilizada en Modernizr, mejorada:

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

Luego puede llamar a esta función cada vez que necesite el evento final de transición:

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

Answer 6

Según el comentario de Matijs, la forma más fácil de detectar eventos de transición es con una biblioteca, jquery en este caso:

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

En javascript sin biblioteca, se vuelve un poco detallado:

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

function callfunction() {
   //do whatever
}

Answer 7

Si usa jQuery y Bootstrap $.support.transition.end devolverá el evento correcto para el navegador actual.

Se define en Bootstrap y se usa en sus devoluciones de llamadas de animación , aunque los documentos de jQuery dicen que no dependen de estas propiedades:

Aunque algunas de estas propiedades están documentadas a continuación, no están sujetas a un ciclo de desactivación / eliminación prolongado y pueden eliminarse una vez que el código jQuery interno ya no las necesita.

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

Answer 8

Uso un código como este (con 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
}

Eso me permite usar JS para agregar cosas al especificar vP concatenado con la propiedad, y si no golpeó un navegador, solo usa el estándar. Los eventos me permiten enlazar fácilmente así:

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

Answer 9

anulación jquery:

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

y uso como:

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

Answer 10

Actualizar

La siguiente es una manera más limpia de hacerlo, y no requiere modernizr

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

Alternativamente

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

Esto se basa en el código sugerido por Modernizr, pero con el evento adicional para las versiones más nuevas de Opera.

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