Rappel lorsque la transition CSS3 se termine

Question

J’aimerais disparaître un élément (transition son opacité à 0) et puis quand fini Retirez l’élément du DOM.

Dans jQuery c’est tout droit vers l’avant puisque vous pouvez spécifier le « supprimer » pour arriver une fois l’animation terminée. Mais si je voudrais animer à l’aide de transitions CSS3 est de toute façon de savoir quand la transition/animation terminée ?

Answer 1

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 est une excellente référence:

https://developer.mozilla.org/en/CSS/CSS_transitions#Detecting_the_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.

Answer 2

Une autre option serait d'utiliser le jQuery Cadre de Transit pour gérer vos transitions CSS3. Les transitions/effets bien sur des appareils mobiles et vous n'avez pas à ajouter une seule ligne de désordre CSS3 transitions dans votre fichier CSS afin de faire des effets d'animation.

Voici un exemple de transition d'un élément d'opacité à 0 lorsque vous cliquez sur, et sera supprimé une fois la transition achevée:

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

JS Fiddle Démo