3

he estado intentando animar unos elementos con javascript y quiero que las animaciones pasen una por una, pero todo se ejecuta al mismo tiempo.

cards.forEach(function(item, index){ //Mover las cartas
    item.classList.add("loaded");
    item.style.transitionDuration = "1300ms"; 
    item.style.transform = "translate("+move+", 50%)";
});

el cambio de clases css es este:

.fade-in{
   opacity:0;
   -webkit-transition: opacity 2s ease-in;
   -moz-transition: opacity 2s ease-in;
   -o-transition: opacity 2s ease-in;
   -ms-transition: opacity 2s ease-in;
   transition: opacity 2s ease-in;
}

.loaded{
    opacity:1;
}

Pero como se ejecuta todo al mismo tiempo, cuando hace el fade in ya hizo la transicion de item.style.transform = "translate("+move+", 50%)"; y entonces no se ve como se mueve.

1 respuesta 1

3

Puedes probar a usar setTimeout para dar un tiempo de espera entre cada transición:

const cards = document.querySelectorAll('.card');

cards.forEach(function(item, index){ //Mover las cartas
    setTimeout(()=> {
      item.classList.add("loaded");
      item.style.transitionDuration = "1300ms"; 
      item.style.transform = 'translate(10px, 50%)';
    },index*300);
});
.loaded{
    opacity:1;
}

.card {
  width: 60px;
  height: 100px;
  display: inline-block;
  background-color: grey;
}
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Es importante darse cuenta de que en cada iteración estoy añadiendo 300 milisegundos más que al elemento anterior (por eso es index * 300), porque si simplemente pusiera "300", todas las transiciones se ejecutarían a la vez pasados esos 300 milisegundos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.