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样式还没有实际应用，当您还设置opacity时，导致它不生效。

如果你想有一个风格的转变的影响，尝试：

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

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