Rappel lorsqu'CSS3 transition finitions

Pour les transitions, vous pouvez utiliser les méthodes suivantes pour détecter la fin d'une transition via jQuery:

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

Mozilla a une excellente référence:

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

Pour les animations, c'est très similaire:

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

Notez que vous pouvez passer tous les navigateur préfixé cas des chaînes dans la méthode bind() simultanément à l'appui de l'événement tir sur tous les navigateurs qui le supportent.

Mise à jour:

Par le commentaire laissé par le Canard: vous utilisez jQuery .one() méthode pour s'assurer que le gestionnaire ne se déclenche qu'une fois. Par exemple:

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

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

Mise à jour 2:

jQuery bind() méthode a été abandonné, et on() méthode est préférable car de jQuery 1.7. bind()

Vous pouvez également utiliser off() méthode sur la fonction de rappel pour s'assurer qu'il sera déclenché qu'une seule fois. Voici un exemple qui est équivalent à l'utilisation de one() méthode:

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

Références:

• .off()

• .un()

Pour quelqu'un que cela peut être pratique pour, voici un jQuery dépendant de la fonction que j'ai eu du succès avec l'application d'une CSS animation via une classe CSS, puis l'obtention d'un rappel de la suite. Il peut ne pas fonctionne parfaitement depuis que je l'avais utilisé dans un Backbone.js App, mais peut-être 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();
}

Je l'ai utilisé un peu comme ce

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

Idée originale de http://mikefowler.me/2013/11/18/page-transitions-in-backbone/

Et cela semble à portée de main: http://api.jqueryui.com/addClass/

---

Mise à jour

Après avoir lutté avec le code ci-dessus et d'autres options, je vous suggère d'être très prudent avec n'importe quel écoute pour CSS fin de l'animation. Avec de multiples animations en cours, cela peut déraper très vite pour des événements à l'écoute. Je suggère fortement une animation de la bibliothèque comme GSAP pour chaque animation, même les plus modestes.

Il y a un animationend Événement qui peut être observée voir la documentation ici,
aussi pour css transition animations, vous pouvez utiliser les transitionend Événement

JS:

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

CSS:

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

HTML:

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