¿Cómo eliminar un div con efecto de desvanecimiento en JavaScript?

Solución:

Hay dos formas de lograr esto: animación CSS3 o animación jQuery.

Animación CSS3

1. En su documento CSS, agregue:

   .list {
       opacity: 1;
       -webkit-transition: opacity 1000ms linear;
       transition: opacity 1000ms linear;
   }
   

   • Esto hará que cualquier cambio de opacidad de su artículo se desvanezca en 1000 ms.

2. Cambie la línea 4 de su JavaScript a:

   removeTarget.style.opacity = '0';
   setTimeout(function(){removeTarget.parentNode.removeChild(removeTarget);}, 1000);
   

   • Esto hará que su elemento cambie la opacidad a 0, lo que hará que la transición desde el paso 1 tenga un efecto. Luego, eliminará el elemento con su código después de 1000 ms.

Nota: Asegúrese de que el tiempo de la transición CSS3 y el setTimeout sean los mismos.

Animación jQuery

1. Obtener jQuery

   • Vaya al sitio web de jQuery y descárguelo, o
   • Agregue `en su documento HTML antes de cualquier código jQuery.

2. Cambie la línea 4 de su Javascript a:

   removeTarget.fadeOut(1000)
   

   • Esto hará que su elemento se desvanezca en 1000 ms, puede cambiar este tiempo a lo que desee.

Hice esta función hace un tiempo para un proyecto personal:

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);

En 2020 puede renunciar al uso setTimeout Para el animationend evento, eliminando la necesidad de mantener la duración en dos lugares:

.fade-out {
  animation: fade 2s;
  -webkit-animation: fade 2s;
  -moz-animation: fade 2s;
}

/* Animate opacity */
@keyframes fade {
  from { opacity: 1 }
  to { opacity: 0 }
}
@-moz-keyframes fade {
  from { opacity: 1 }
  to { opacity: 0 }
}
@-webkit-keyframes fade {
  from { opacity: 1 }
  to { opacity: 0 }
}

const elementToFade = document.getElementById('my-element');

elementToFade.onanimationend = (e) => {
  if (e.srcElement.classList.contains('fade-out')) {
    elementToFade.parentNode.removeChild(elementToFade);
  }
};

// To fade away:
elementToFade.classList.add('fade-out');

---

---

Utiliza Nuestro Buscador