CSS tiene un amplio dominio, mientras que el CSS básico es esencialmente copiar y pegar, puede volverse muy complicado cuando se fusiona con tecnologías front-end como JavaScript y marcos relacionados. Por lo tanto, se observa que algunos desarrolladores de back-end altamente calificados tienen dificultades para diseñar el front-end de los sitios web de su cartera. Los principiantes rara vez utilizan muchos atributos y propiedades de JavaScript vinculados con CSS. Este artículo hace uso de uno de esos atributos para desvanecer y, en última instancia, eliminar un párrafo con solo hacer clic en un botón.
Código HTML: tres elementos de texto y un botón de eliminación están envueltos por un contenedor.
HTML
<section class="container"> <h1 class="notRemoved"> I am confident I will not be removed! </h1> <p id="parId">Don't remove me I beg you</p> <h1 class="notRemoved"> I will also not be removed </h1> <button>Remove</button> </section>
CSS: Al párrafo se le asigna una transición por opacidad con una duración de un segundo. Además, la clase «eliminada» que se agregará al elemento eliminado especifica que la «opacidad» final sea cero. Esto le da un aspecto descolorido a la eliminación.
#parId {
transition: opacity 1s;
}
.removed {
opacity: 0;
}
JavaScript: primero, creamos el objeto DOM del botón y el párrafo (con la etiqueta y la identificación adecuadas). Además, agregamos el detector de eventos al botón, este detector agrega una clase «eliminada» al párrafo que reduce la opacidad e inicia el proceso de desvanecimiento. Finalmente, agregamos un oyente al párrafo que escucha el final de la transición. Tan pronto como se completa la transición, se elimina el párrafo.
Javascript
var btn = document.querySelector("button");
var par = document.querySelector("#parId");
btn.addEventListener("click", e => {
par.classList.add("removed");
});
par.addEventListener("transitionend", () =>
{
par.remove();
})
Código final: el siguiente ejemplo muestra la combinación de todos los códigos anteriores.
<!DOCTYPE html>
<html>
<style>
#parId {
transition: opacity 1s;
}
.removed {
opacity: 0;
}
</style>
<body>
<section class="container">
<h1 class="notRemoved">
I am confident I will not be removed!
</h1>
<p id="parId">
Don't remove me I beg you
</p>
<h1 class="notRemoved">
I will also not be removed
</h1>
<button>Remove</button>
</section>
<script>
var btn = document.querySelector("button");
var par = document.querySelector("#parId");
btn.addEventListener("click", e => {
par.classList.add("removed");
});
par.addEventListener("transitionend", () => {
par.remove();
})
</script>
</body>
</html>
Producción: