我正在尝试创建照片库。我的这段代码有问题:
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";
你能告诉我这有什么问题吗?
最佳答案
因为浏览器一次只做一件事(在大多数情况下),所以出于所有意图和目的,同时分配这些样式。
这意味着当您还设置不透明度
时,transition
样式尚未实际应用,导致其不生效。
如果您希望样式受到过渡的影响,请尝试:
next.style.transition = "opacity 1.0s";
requestAnimationFrame(function() {next.style.opacity = 1;});
这会让它很好地过渡。请注意,您可能需要 requestAnimationFrame
的填充。
关于JavaScript 无法执行 "style.transition",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26689502/