javascript - transicion - transition css hover

Devolución de llamada en transición CSS

Question

¿Es posible recibir una notificación (como una devolución de llamada) cuando se ha completado una transición de CSS?

Answer 1

El complemento jQuery.transit , un complemento para transformaciones y transiciones de CSS3, puede invocar las animaciones de CSS desde el script y darle una devolución de llamada.

Answer 2

Estoy usando el siguiente código, es mucho más simple que tratar de detectar qué evento final específico utiliza un navegador.

$(".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 (  ._.)
  }

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

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

}(jQuery);

Answer 3

Sé que Safari implementa una webkitTransitionEnd llamada de webkitTransitionEnd que puedes adjuntar directamente al elemento con la transición.

Su ejemplo (reformateado en múltiples líneas):

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

Answer 4

Sí, si tales cosas son compatibles con el navegador, entonces se activa un evento cuando finaliza la transición. El evento real sin embargo, difiere entre los navegadores:

• Los navegadores Webkit (Chrome, Safari) usan webkitTransitionEnd
• Firefox usa transitionend
• IE9 + usa msTransitionEnd
• Opera usa oTransitionEnd

Sin embargo, debes tener en cuenta que webkitTransitionEnd no siempre se webkitTransitionEnd . Esto me ha sorprendido varias veces, y parece ocurrir si la animación no tendría ningún efecto sobre el elemento. Para evitar esto, tiene sentido utilizar un tiempo de espera para activar el controlador de eventos en el caso de que no se haya activado como se esperaba. Una publicación de blog sobre este problema está disponible aquí: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 Internal Server Error

Con esto en mente, tiendo a usar este evento en un trozo de código que se parece un poco a esto:

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn''t fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

Nota: para obtener el nombre final del evento de transición, puede usar el método publicado como la respuesta en: ¿Cómo normalizo las funciones de transición CSS3 en los navegadores? .

Nota: esta pregunta también está relacionada con: - Eventos de transición CSS3