Retorno de chamada quando a transição CSS3 termina

Eu gostaria de desvanecer um elemento (fazendo a transição de sua opacidade para 0) e, quando terminar, remova o elemento do DOM.

No jQuery, isso é simples, pois você pode especificar que "Remover" ocorra após a conclusão da animação. Mas se eu desejar animar usando transições CSS3, existe alguma maneira de saber quando a transição / animação foi concluída?

Para transições, você pode usar o seguinte para detectar o final de uma transição via jQuery:

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

Mozilla tem uma excelente referência:

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

Para animações é muito semelhante:

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

Observe que você pode passar todas as seqüências de eventos com prefixo do navegador para o método bind () simultaneamente para dar suporte ao disparo de eventos em todos os navegadores que o suportam.

Atualizar:

De acordo com o comentário deixado por Duck: você usa o .one()método jQuery para garantir que o manipulador seja acionado apenas uma vez. Por exemplo:

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

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

Atualização 2:

O bind()método jQuery foi descontinuado e o on()método é preferido a partir de jQuery 1.7.bind()

Você também pode usar o off()método na função de retorno de chamada para garantir que seja acionado apenas uma vez. Aqui está um exemplo que é equivalente a usar o one()método:

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

Referências:

• .off()

• .one()

Outra opção seria usar o jQuery Transit Framework para lidar com suas transições CSS3. As transições / efeitos têm bom desempenho em dispositivos móveis e você não precisa adicionar uma única linha de transições CSS3 confusas no seu arquivo CSS para fazer os efeitos de animação.

Aqui está um exemplo que fará a transição da opacidade de um elemento para 0 quando você clicar nele e será removido assim que a transição estiver concluída:

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

JS Fiddle Demo

Há um animationendevento que pode ser observado, veja a documentação aqui , também para transitionanimações em css , você pode usar o transitionendevento

Não há necessidade de bibliotecas adicionais, todas elas funcionam com vanilla JS

document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
	this.innerHTML = "transition event ended";
}

#myDIV {transition: top 2s; position: relative; top: 0;}
div {background: #ede;cursor: pointer;padding: 20px;}

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

Para qualquer um que possa ser útil, aqui está uma função dependente de jQuery, com a qual tive sucesso ao aplicar uma animação CSS por meio de uma classe CSS e depois receber um retorno de chamada posteriormente. Pode não funcionar perfeitamente desde que eu o usei em um aplicativo Backbone.js, mas talvez seja ú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();
}

Eu usei isso assim

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

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

E isso parece útil: http://api.jqueryui.com/addClass/

Atualizar

Depois de lutar com o código acima e outras opções, eu sugeriria ser muito cauteloso com qualquer escuta da animação CSS. Com várias animações em andamento, isso pode ficar confuso muito rápido para a escuta do evento. Eu sugeriria fortemente uma biblioteca de animação como o GSAP para todas as animações, mesmo as pequenas.

A resposta aceita atualmente é acionada duas vezes para animações no Chrome. Presumivelmente, isso ocorre porque reconhece webkitAnimationEnde também animationEnd. Definitivamente, o seguinte será acionado apenas uma 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);
        });