JavaScript - Como hacer un efecto FadeOut de un elemento lista antes de eliminarlo

 
Vista:
sin imagen de perfil
Val: 3
Ha aumentado su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como hacer un efecto FadeOut de un elemento lista antes de eliminarlo

Publicado por Angelo (1 intervención) el 23/08/2020 15:59:36
Hola buenas tardes,

Estoy trabajando en un proyecto pequeño de una app web de Tareas solo para practicar un poco la programación ahora que no estamos en clases.

Mi duda es la siguiente, tengo un sistema muy sencillo de Js para añadir una tarea que seria añadir un elemento "li" a un "ul".

Funciona bien, el problema es que para hacerlo mas bonito a la hora de hacer click en él y eliminarlo me gustaría que este hiciera un efecto FadeOut.

El problema es que no se me ocurre como programarlo jeje,

Me imagino que lo mas acertado seria con algún tipo de setTimeout pero he estado horas probando cositas y no consigo que funcione.

Si me echáis una mano estaría increíble!

Este es mi código por ahora

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var lista = document.getElementById("tareas"),
inputTarea = document.getElementById("agregar-tarea"),
btnAgregar = document.getElementById("btn-agregar"),
nuevo = document.getElementsByName("li");
 
 
 
var AgregarTarea = function(){
    var tarea = inputTarea.value,
    nuevaTarea = document.createElement("li"),
    contenido = document.createTextNode(tarea),
    enlace = document.createElement("a");
 
    enlace.appendChild(contenido);
    enlace.setAttribute("href", "#");
    nuevaTarea.appendChild(enlace);
    lista.appendChild(nuevaTarea);
 
    inputTarea.value="";
 
    for (var i = 0; i <= lista.children.length -1; i++) {
        lista.children[i].addEventListener("click", function(){
            this.parentNode.removeChild(this);
 
    });
}
 
 
 
}
 
var eliminarTarea = function(){
 
     this.parentNode.removeChild(this);
 
 
};
 
 
 
 
 
 
 
 
 
btnAgregar.addEventListener("click", AgregarTarea);
this.addEventListener("click", eliminarTarea);
 
for (var i = 0; i <= lista.children.length -1; i++) {
    lista.children[i].addEventListener("click", eliminarTarea);
};
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder