页面之间的 JS 淡入淡出在 Safari 上不起作用

Question

我在我的网站页面之间添加了一些 JavaScript 淡入/淡出转换：

window.transitionToPage = function(href) {
    document.querySelector('body').style.opacity = 0
    setTimeout(function() { 
        window.location.href = href
    }, 750)
}

document.addEventListener('DOMContentLoaded', function(event) {
    document.querySelector('body').style.opacity = 1
})

它只是改变不透明度来创建淡入淡出。

除了一种情况外，它的效果非常好。 当我在 Safari 上时，单击浏览器的返回按钮。不透明度似乎保持在 0 并且不显示内容。当我 ⌘R.

时它就起作用了。

关于如何在按下返回按钮时启动此转换有什么想法吗？或者有其他解决方案吗？非常感谢。

Answer 1

尝试在 DOMContentLoaded 之后 setTimeout 来更改不透明度？

Answer 2

按下后退按钮时，浏览器将返回到 URL 更改之前刚刚的状态。

如果您更改代码以在导航之前重置不透明度，您可能能够返回到可见页面，而不会影响淡入淡出效果。

window.transitionToPage = function(href) {
    document.querySelector('body').style.opacity = 0
    setTimeout(function() { 
        // Reset opacity for back navigation.
        document.querySelector('body').style.opacity = 1
        window.location.href = href
    }, 750)
}