Javascript不会执行＆＃34; style.transition＆＃34;

Question

我正在尝试创建照片库。我对此代码有疑问：

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";
}

我不知道为什么Javascript不会执行此行：

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

你能告诉我这有什么问题吗？。

Answer 1

因为浏览器一次只做一件事（在大多数情况下），所有意图和目的都是同时分配这些样式。

这意味着当您同时设置transition时，opacity样式尚未实际应用，导致它无法生效。

如果您希望样式受到转换的影响，请尝试：

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

这将使它过渡得很好。请注意，您可能需要requestAnimationFrame的填充。