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
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
0