How To Trigger Css Translate Animation With Javascript

I am trying to create a manual slideshow which animates a translation of four images left or right depending on which button is pressed uncovering four new ones and hiding the old.

Solution 1:

Two things to notice there.

First off, you need to transition the transform property, not the translate value.

Second and more importantly, by using setAttribute on the very next line, you're overriding any previous value the style attribute had. And that includes the transition you just set.

That's why the setAttribute method is generally not recommended, specially for the style attribute.

So fix the javascript with these lines:

album_covers[n].style.transition = "transform 1.0s linear 0s";
album_covers[n].style.transform = "translateX(" + amount + ")";

instead of

album_covers[n].style.transition = "translate 1.0s linear 0s";
album_covers[n].setAttribute("style", "transform: translate(" + amount + ", 0px);");

---

Alternatevely, you can just delete the line of javascript where you're trying to apply the animation, and add a CSS rule instead

.album-cover{
  transition:transform 1s linear;
}

Solution 2:

The css property you want to set transition on is transform, not translate

album_covers[n].style.transition = "transform 1.0s linear 0s";