data - windows document javascript




Callback al termine della transizione CSS3 (3)

Mi piacerebbe sfumare un elemento (passando la sua opacità a 0) e al termine rimuovere l'elemento dal DOM.

In jQuery questo è semplice in quanto è possibile specificare che "Rimuovi" si verifichi al termine di un'animazione. Ma se desidero animare usando le transizioni CSS3 c'è comunque da sapere quando la transizione / animazione è completata?


Attualmente la risposta accettata viene attivata due volte per le animazioni in Chrome. Presumibilmente questo perché riconosce webkitAnimationEnd così come animationEnd . Il seguente sarà sicuramente solo una volta:

/* 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);
        });

Per chiunque sia a portata di mano, ecco una funzione dipendente da jQuery con cui ho avuto successo per applicare un'animazione CSS tramite una classe CSS, ottenendo successivamente una richiamata. Potrebbe non funzionare perfettamente poiché l'ho utilizzato in un'app Backbone.js, ma forse utile.

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

L'ho usato un po 'come questo

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

Idea originale da http://mikefowler.me/2013/11/18/page-transitions-in-backbone/

E questo sembra utile: http://api.jqueryui.com/addClass/

Aggiornare

Dopo aver lottato con il codice precedente e altre opzioni, suggerirei di essere molto cauto con qualsiasi ascolto per l'animazione CSS. Con le animazioni multiple in corso, questo può diventare molto veloce per l'ascolto degli eventi. Suggerisco vivamente una libreria di animazione come GSAP per ogni animazione, anche le più piccole.


Un'altra opzione sarebbe quella di utilizzare il framework jQuery Transit per gestire le transizioni CSS3. Le transizioni / effetti si comportano bene sui dispositivi mobili e non devi aggiungere una singola riga di transizioni CSS3 nel tuo file CSS per poter realizzare gli effetti di animazione.

Ecco un esempio che trasferirà l'opacità di un elemento a 0 quando si fa clic su di esso e verrà rimosso una volta completata la transizione:

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

JS Fiddle Demo





css3