javascript - texto - efectos hover para imagenes css

Eventos de transición de CSS3

Question

¿Hay algún evento disparado por un elemento para verificar si una transición css3 ha comenzado o terminado?

Answer 1

Borrador de Transiciones de W3C CSS

La finalización de una transición CSS genera un evento DOM correspondiente. Se dispara un evento por cada propiedad que se somete a una transición. Esto permite que un desarrollador de contenido realice acciones que se sincronicen con la finalización de una transición.

Webkit

Puede configurar un controlador para un evento DOM que se envía al final de una transición. El evento es una instancia de WebKitTransitionEvent y su tipo es webKitTransitionEnd en JavaScript.

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

Mozilla

Hay un único evento que se activa cuando se completan las transiciones. En Firefox, el evento es transitionend , en Opera, oTransitionEnd , y en WebKit es webkitTransitionEnd .

Opera

Hay un tipo de evento de transición disponible. El evento oTransitionEnd ocurre al finalizar la transición.

explorador de Internet

El evento transitionend ocurre al finalizar la transición. Si la transición se elimina antes de la finalización, el evento no se disparará.

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

Answer 2

¡Solo por diversión, no hagas esto!

$.fn.transitiondone = function () {
  return this.each(function () {
    var $this = $(this);
    setTimeout(function () {
      $this.trigger(''transitiondone'');
    }, (parseFloat($this.css(''transitionDelay'')) + parseFloat($this.css(''transitionDuration''))) * 1000);
  });
};


$(''div'').on(''mousedown'', function (e) {
  $(this).addClass(''bounce'').transitiondone();
});

$(''div'').on(''transitiondone'', function () {
  $(this).removeClass(''bounce'');
});

Answer 3

En Opera 12 cuando se vincula con el JavaScript simple, ''oTransitionEnd'' funcionará:

document.addEventListener("oTransitionEnd", function(){
    alert("Transition Ended");
});

sin embargo, si enlaza jQuery, debe usar ''otransitionend''

$(document).bind("otransitionend", function(){
    alert("Transition Ended");
});

En caso de que esté utilizando Modernizr o bootstrap-transition.js, simplemente puede hacer un cambio:

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

Aquí también puede encontrar información aquí http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

Answer 4

Estaba usando el enfoque dado por Pete, sin embargo, ahora he comenzado a usar lo siguiente

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

Alternativamente, si usas bootstrap, simplemente puedes hacer

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

Esto es porque incluyen lo siguiente en 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 (  ._.)
  }


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

}(jQuery);

Tenga en cuenta que también incluyen una función emulateTransitionEnd que puede ser necesaria para garantizar que siempre se realice una devolución de llamada.

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

Tenga en cuenta que a veces este evento no se dispara, generalmente en el caso en que las propiedades no cambien o no se active una pintura. Para garantizar que recibamos siempre una devolución de llamada, establezcamos un tiempo de espera que activará el evento manualmente.

http://blog.alexmaccaw.com/css-transitions

Answer 5

Si simplemente desea detectar solo un único extremo de transición, sin utilizar ningún marco JS, aquí hay una pequeña función de utilidad conveniente:

function once = function(object,event,callback){
    var handle={};

    var eventNames=event.split(" ");

    var cbWrapper=function(){
        eventNames.forEach(function(e){
            object.removeEventListener(e,cbWrapper, false );
        });
        callback.apply(this,arguments);
    };

    eventNames.forEach(function(e){
        object.addEventListener(e,cbWrapper,false);
    });

    handle.cancel=function(){
        eventNames.forEach(function(e){
            object.removeEventListener(e,cbWrapper, false );
        });
    };

    return handle;
};

Uso:

var handler = once(document.querySelector(''#myElement''), ''transitionend'', function(){
   //do something
});

luego, si desea cancelar en algún momento, puede hacerlo con

handler.cancel();

Es bueno para otros usos de eventos también :)

Answer 6

Todos los navegadores modernos ahora admiten el evento no prefijado:

element.addEventListener(''transitionend'', callback, false);

Funciona en las últimas versiones de Chrome, Firefox y Safari. Incluso IE10 +.