Javascript won't execute “style.transition”

Question

I'am trying to create photo gallery. I've got a problem with this code:

function ZmienZdjecie(CurrentObject, NextObject, Direction) {
    var current = document.getElementById(CurrentObject);
    var kierunek = "0%";

    if (Direction == "Next") {
        kierunek = "100%";
    } else {
        kierunek = "-100%";
    }
    current.style.transition = "right 1.0s, opacity 1s";
    current.style.right = kierunek;
    current.style.opacity = "0";
    setTimeout(function () { LokPhoto(current) }, 500)
    var next = document.getElementById(NextObject);
    next.style.display = "block";
    next.style.transition = "opacity 1.0s";
    next.style.opacity = "1";
}

I don't know why Javascript won't execute this line:

next.style.transition = "opacity 1.0s";

Could You tell me what is wrong with this ?.

Answer 1

Because the browser does one thing at a time (in most cases), it is for all intents and purposes assigning those styles at the same time.

This means that the transition style hasn't actually applied yet when you're also setting the opacity , causing it to not take effect.

If you want a style to be affected by the transition, try:

next.style.transition = "opacity 1.0s";
requestAnimationFrame(function() {next.style.opacity = 1;});

This will make it transition nicely. Note that you may need a polyfill for requestAnimationFrame .