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.