JS页面淡入淡出效果在Safari浏览器返回按钮下失效的解决请求

问题原因 #

Safari的**后退/前进缓存（BF Cache）**会保存页面的DOM状态和JavaScript执行上下文。当点击返回按钮时，页面从缓存直接恢复，不会触发DOMContentLoaded事件——你的代码仅在DOMContentLoaded时将body的opacity设为1，缓存中保存的opacity=0状态会被直接还原，导致页面无法显示。

修复方案 #

修改代码，添加pageshow事件监听，该事件会在页面从BF Cache加载时触发：

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

// 统一处理页面加载和缓存恢复时的opacity还原
function restoreBodyOpacity() {
    document.querySelector('body').style.opacity = 1
}

document.addEventListener('DOMContentLoaded', restoreBodyOpacity)
document.addEventListener('pageshow', function(event) {
    // persisted为true表示页面来自BF Cache
    if (event.persisted) {
        restoreBodyOpacity()
    }
})

替代实现方式（更健壮的过渡） #

如果需要更稳定的跨浏览器过渡效果，可以将样式逻辑与JS分离，结合CSS过渡处理：

1. 先给body添加CSS过渡规则：

body {
    opacity: 0;
    transition: opacity 0.75s ease-out;
}
body.loaded {
    opacity: 1;
}

2. 修改JavaScript代码，用类名控制显示状态：

window.transitionToPage = function(href) {
    document.body.classList.remove('loaded')
    setTimeout(function() { 
        window.location.href = href
    }, 750)
}

function markPageLoaded() {
    document.body.classList.add('loaded')
}

document.addEventListener('DOMContentLoaded', markPageLoaded)
document.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        markPageLoaded()
    }
})

这种方式既分离了样式与逻辑，也兼容了BF Cache场景，跨浏览器表现更一致。

内容的提问来源于stack exchange，提问作者VL Design