Devolución de llamada en la transición CSS

Question

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

Answer 1

Sé que Safari implementa un webkitTransitionEnd devolución de llamada que se puede conectar directamente al elemento con la transición.

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

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

Answer 2

Sí, si tales cosas son compatibles con el navegador, a continuación, se activa un evento cuando la transición se complete. El evento actual, sin embargo, se diferencia entre los navegadores:

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

Sin embargo, usted debe ser consciente de que webkitTransitionEnd no siempre se dispara! Esto me ha pillado 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 disparar el controlador de eventos en el caso de que no se ha disparado como se esperaba. Un blog acerca de este problema está disponible aquí: http: // www. cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 Error interno del servidor

Con esto en mente, que tienden a utilizar este evento en un trozo de código que se parece un poco como 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 de finalización del evento de transición se puede utilizar el método publicado que la respuesta en: ¿Cómo normalizar las funciones de transición a través de navegadores CSS3? .

Nota: esta pregunta también se relaciona con: - eventos de transición CSS3

Answer 3

Estoy utilizando 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
});

---

Por otra parte, si se utiliza de arranque, entonces puede simplemente hacer

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

Este es becuase que incluya 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 4

El jQuery.transit complemento , un plugin para transformaciones CSS3 y transiciones, puede llamar a sus animaciones CSS desde el guión y le dará una devolución de llamada.

Answer 5

Esto puede lograrse con facilidad con el Evento transitionend consulte la documentación de aquí Un simple ejemplo:

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
	this.innerHTML = "Transition event ended";
}

#button {transition: top 2s; position: relative; top: 0;}

<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>