web-dev-qa-db-fra.com

CSS3 - Transition sur la suppression DOM

En utilisant images clés , il est possible d'animer un élément dès qu'il est inséré dans le DOM. Voici quelques exemples de CSS:

@-moz-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@-webkit-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

#box {
    -webkit-animation: fadeIn 500ms;
    -moz-animation: fadeIn 500ms;
    animation: fadeIn 500ms;
}

Existe-t-il des fonctionnalités similaires disponibles pour appliquer une animation (via CSS, pas de JavaScript) à un élément juste avant sa suppression du DOM? Voici un jsFiddle que j'ai créé pour jouer avec cette idée; n'hésitez pas à le bifurquer si vous connaissez une solution.

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

cssdomcss3keyframecss-animations
43
Steve

Créez une autre animation CSS appelée fadeOut, par exemple. Ensuite, lorsque vous souhaitez supprimer l'élément, remplacez la propriété animation de l'élément par cette nouvelle animation et utilisez l'événement animationend pour déclencher la suppression réelle de l'élément une fois l'animation terminée:

$('.hide').click(function() {
    if (!$(this).hasClass('disabled')) {
        $('#fill').css('-webkit-animation', 'fadeOut 500ms');
        $('#fill').bind('webkitAnimationEnd',function(){
            $('#fill').remove();
            $('.show, .hide').toggleClass('disabled');
        });
    }
});

Voir aussi ma version mise à jour de votre jsFiddle. Cela fonctionne au moins pour moi dans Safari.

Eh bien, vous devriez utiliser une classe au lieu de cette .css().

Je ne pense pas que jQuery ait un support "réel" pour les animations CSS, donc je ne pense pas que vous puissiez vous débarrasser de ce webkitAnimationEnd. Dans Firefox, cela s'appelle simplement animationend.

Je suis presque sûr qu'il n'y a aucun moyen de le faire en CSS uniquement.

17
mercator

J'ai travaillé sur une bibliothèque de composants pour javascript et j'ai rencontré ce problème moi-même. J'ai l'avantage de pouvoir lancer une tonne de javascript sur le problème, mais puisque vous en utilisez déjà un peu, considérez ce qui suit pour une solution gracieusement dégradante:

Lors de la suppression d'un composant/nœud dom, ajoutez une classe appelée "suppression".

Ensuite, dans le CSS, vous pouvez définir votre animation en utilisant cette classe:

.someElement.removing {
    -webkit-animation: fadeOut 500ms;
    -moz-animation: fadeOut 500ms;
    animation: fadeOut 500ms;
}

Et de retour dans le javascript, juste après avoir ajouté la classe 'remove', vous devriez être en mesure de vérifier la propriété css 'animation', et si elle existe, alors vous savez que vous pouvez accrocher 'animationEnd' et si ce n'est pas le cas 't, puis retirez l'élément immédiatement. Je me souviens d'avoir testé cela il y a quelque temps, cela devrait fonctionner; Je vais voir si je peux creuser l'exemple de code.

Mise à jour: J'ai creusé cette technique et commencé à écrire un plugin vraiment cool pour jQuery qui vous permet d'utiliser des animations CSS3 pour les éléments DOM qui sont supprimés . Aucun Javascript supplémentaire requis: http://www.github.com/arthur5005/jquery.motionnotion

C'est très expérimental, utilisez-le à vos risques et périls, mais j'aimerais de l'aide et des commentaires. :)

6
Arthur Goldsmith