javascript - definicion - Devolución de llamada cuando finaliza la transición de CSS3

title html

Question

Me gustaría desvanecer un elemento (transición de su opacidad a 0) y luego, cuando termine, eliminar el elemento del DOM.

En jQuery, esto es sencillo ya que puede especificar que se produzca el "Eliminar" después de que finalice una animación. Pero si deseo animar usando transiciones CSS3 ¿hay alguna forma de saber cuándo se completó la transición / animación?

Answer 1

La respuesta aceptada actualmente se activa dos veces para animaciones en Chrome. Presumiblemente esto se debe a que reconoce webkitAnimationEnd así como animationEnd . Lo siguiente definitivamente solo se dispara una vez:

/* From Modernizr */
function whichTransitionEvent(){

    var el = document.createElement(''fakeelement'');
    var transitions = {
        ''animation'':''animationend'',
        ''OAnimation'':''oAnimationEnd'',
        ''MSAnimation'':''MSAnimationEnd'',
        ''WebkitAnimation'':''webkitAnimationEnd''
    };

    for(var t in transitions){
        if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

$("#elementToListenTo")
    .on(whichTransitionEvent(),
        function(e){
            console.log(''Transition complete!  This is the callback!'');
            $(this).off(e);
        });

Answer 2

Otra opción sería usar el jQuery Transit Framework para manejar sus transiciones CSS3. Las transiciones / efectos funcionan bien en dispositivos móviles y no tiene que agregar una sola línea de transiciones CSS3 desordenadas en su archivo CSS para hacer los efectos de animación.

Aquí hay un ejemplo que hará la transición de la opacidad de un elemento a 0 cuando haga clic en él y se eliminará una vez que se complete la transición:

$("#element").click( function () {
    $(''#element'').transition({ opacity: 0 }, function () { $(this).remove(); });
});

Demostración de JS Fiddle

Answer 3

Para cualquiera que sea útil, aquí hay una función dependiente de jQuery con la que tuve éxito al aplicar una animación CSS a través de una clase de CSS, y luego recibir una devolución de llamada. Es posible que no funcione a la perfección ya que lo usé en la aplicación Backbone.js, pero tal vez sea útil.

var cssAnimate = function(cssClass, callback) {
    var self = this;

    // Checks if correct animation has ended
    var setAnimationListener = function() {
        self.one(
            "webkitAnimationEnd oanimationend msAnimationEnd animationend",
            function(e) {
                if(
                    e.originalEvent.animationName == cssClass &&
                    e.target === e.currentTarget
                ) {
                    callback();
                } else {
                    setAnimationListener();
                }
            }
        );
    }

    self.addClass(cssClass);
    setAnimationListener();
}

Lo usé un poco como esto

cssAnimate.call($("#something"), "fadeIn", function() {
    console.log("Animation is complete");
    // Remove animation class name?
});

Idea original de http://mikefowler.me/2013/11/18/page-transitions-in-backbone/

Y esto parece útil: http://api.jqueryui.com/addClass/

Actualizar

Después de luchar con el código anterior y otras opciones, sugeriría ser muy cauteloso al escuchar cualquier animación CSS. Con múltiples animaciones en marcha, esto puede complicarse muy rápido para escuchar el evento. Recomiendo encarecidamente una biblioteca de animación como GSAP para cada animación, incluso las pequeñas.

Answer 4

Para las transiciones, puede usar lo siguiente para detectar el final de una transición a través de jQuery:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozilla tiene una excelente referencia:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

Para animaciones es muy similar:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Tenga en cuenta que puede pasar todas las cadenas de eventos con prefijo del navegador al método bind () simultáneamente para respaldar el lanzamiento del evento en todos los navegadores que lo admitan.

Actualizar:

Según el comentario dejado por Duck: utilizas el método .one() jQuery para asegurarte de que el controlador solo se dispare una vez. Por ejemplo:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Actualización 2:

El método jQuery bind() ha sido desaprobado, y se prefiere el método on() partir de jQuery 1.7 . bind()

También puede usar off() método off() en la función de devolución de llamada para asegurarse de que se dispare solo una vez. Aquí hay un ejemplo que es equivalente a usar el método one() :

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

Referencias

• .off()

• .one()