JavaScript 无法执行 "style.transition"

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样式尚未实际应用，导致其不生效。

如果您希望样式受到过渡的影响，请尝试:

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

这会让它很好地过渡。请注意，您可能需要 requestAnimationFrame 的填充。