Comment faire pour supprimer un div avec effet de fondu de sortie en JavaScript?

Je veux supprimer un élément div clic de l'événement, mais je veux l'enlever avec un effet de fondu de sortie. J'ai eu quelques JQuery solution mais j'ai besoin de JavaScript ou css solution.

document.querySelector('.list').addEventListener("click", function(e){
    if (e.target.localName === "span") {
        var removeTarget = e.target.parentNode.parentNode;
        removeTarget.parentNode.removeChild(removeTarget);
    };
});

Ce code est la suppression de l'élément div avec aucun effet. Comment puis-je ajouter un effet de fondu de sortie?

jquery est un pur javascript.
Je suis en train de travailler sur un petit projet et je ne voulez pas utiliser des frameworks comme JQuery.
Double Possible de Javascript fade in fade out sans Jquery et CSS3 et une foule d'autres, trouvés par la recherche.

OriginalL'auteur PariSh KhAn | 2015-10-29

  1. 9

    Il y a deux façons que vous pouvez atteindre cet objectif: CSS3 animation ou jQuery animation.

    CSS3 Animation

    1. Dans votre document CSS, ajouter:

      .list {
    opacity: 1;
    -webkit-transition: opacity 1000ms linear;
    transition: opacity 1000ms linear;
}
      • Cela fera toute modification de l'opacité à votre point de fondu par 1000ms.

    2. Changement de la ligne 4 de votre JavaScript:

      removeTarget.style.opacity = '0';
setTimeout(function(){removeTarget.parentNode.removeChild(removeTarget);}, 1000);
      • Cela rendra votre article modifiez l'opacité à 0, ce qui rend la transition à partir de l'étape 1 ont un effet. Ensuite, il va supprimer l'élément avec votre code après 1000ms.

    Remarque: assurez-vous que le temps de la CSS3 transition et le setTimeout sont les mêmes.

    jQuery Animation

    1. Obtenir jQuery

      • Aller à la jQuery Site web et le télécharger, ou
      • Ajouter " dans votre document HTML avant tout code jQuery.

    2. Changement de la ligne 4 de votre Javascript:

      removeTarget.fadeOut(1000)
      • Ce sera Fade Out de votre article par 1000ms, vous pouvez modifier ce temps, tout ce que vous voulez.
    Merci beaucoup. Qui fonctionne comme un charme.
    Content d'avoir pu aider, pour marquer que cela a fonctionné et pour référence ultérieure, vous pouvez appuyer sur le bouton de contrôle vers le haut à gauche de mon post de l'accepter.
    très pratique, bien que le fixe de la dépendance à la css peut être douloureuse à un moment plus tard (1 upvote 🙂 )

    OriginalL'auteur Jaketr00

  2. 7

    J'ai fait cette fonction il y a un moment pour un projet personnel:

    function removeFadeOut( el, speed ) {
    var seconds = speed/1000;
    el.style.transition = "opacity "+seconds+"s ease";

    el.style.opacity = 0;
    setTimeout(function() {
        el.parentNode.removeChild(el);
    }, speed);
}

removeFadeOut(document.getElementById('test'), 2000);
    super utile ! très facile ! totalement générique ! Juste ce que je cherchais.

    OriginalL'auteur alvarodms

  3. 1

    Ajouter le code CSS suivant la classe de l'élément à l'aide de elem.className="mon-animation"; cliquez sur:

    .my-animation {
  animation: fade 3s steps(90) forwards;
 -webkit-animation: fade 3s steps(90) forwards;
  -moz-animation: fade 3s steps(90) forwards;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.0;
  }
}

    Vous pouvez contrôler la vitesse de l'animation en modifiant les marches(nombre).

    Simple et fonctionnelle. Merci
    Cela ne supprime pas l'élément du DOM, mais qui est demandé dans la question.

    OriginalL'auteur Anne Bione

  4. 0

    Juste goto jQuery code source, prendre la fade code qui est dans le plus pur javascript, et de l'utiliser, pas besoin de réinventer la roue,

    ou une astuce est de réduire la hauteur de la div à 0 lentement en utilisant setTimeInterval()

    ou un css solution serait d'utiliser transform et transition propriétés

    OriginalL'auteur vinayakj