页面加载淡入动画的实现优化方案咨询

看起来你在尝试实现页面加载时的淡入动画，但遇到了刷新页面闪烁的问题对吧？先帮你拆解下当前代码里的问题，再给你几个更顺滑的优化方案～

先分析下当前代码导致闪烁的核心原因： #

1. 样式状态反复跳动：你先给body设了内联opacity:0，然后在window.onload里立刻把body的opacity设为1，紧接着又在动画函数里把所有子元素的opacity设为0——这就导致页面会先“闪现”一下，再被隐藏，最后才淡入，自然会有闪烁感。
2. 缺失关键帧定义：JS里用了opacity-fade-in动画，但你没在CSS里定义这个关键帧，所以动画其实没生效，只是直接把元素opacity设为1，看起来更像突然出现而不是平滑过渡。
3. 冗余DOM操作：三次遍历所有子元素修改样式，不仅性能浪费，也容易引发样式时序问题。

优化方案一：CSS+JS配合，避免样式跳动（推荐） #

核心思路是用CSS预定义初始状态和动画，用JS只控制动画的触发时机，减少不必要的DOM操作，从根源解决闪烁。

修改后的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            /* 定义淡入关键帧 */
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            /* 预加载状态：默认隐藏所有元素 */
            .page-preload * {
                opacity: 0 !important;
            }
            /* 淡入动画类：保持动画结束后的状态 */
            .fade-in {
                animation: fadeIn 0.5s forwards;
            }
        </style>
        <script type="text/javascript" src="scripts/session_startup_animation.js"></script>
    </head>
    <!-- 用类名设置初始状态，替代内联style -->
    <body class="page-preload">
        <p>Things that are incredible.</p>
        <p>Other better things.</p>
    </body>
</html>

修改后的session_startup_animation.js

function sessionStartupAnimation() {
    // 移除预加载隐藏类，给body和子元素添加淡入动画
    const body = document.body;
    body.classList.remove('page-preload');
    body.classList.add('fade-in');
    // 如果需要子元素也逐个淡入，可以给每个元素加动画（可选）
    body.querySelectorAll('*').forEach(elem => {
        elem.classList.add('fade-in');
    });
}

// 用DOMContentLoaded替代window.onload：DOM就绪就触发，更早执行，避免等待资源加载
window.addEventListener('DOMContentLoaded', () => {
    const hasExecuted = sessionStorage.getItem('hasExecutedSessionStartupAnimation');
    
    if (!hasExecuted) {
        sessionStartupAnimation();
        sessionStorage.setItem('hasExecutedSessionStartupAnimation', 'true');
    } else {
        // 会话内已执行过动画，直接移除预加载状态显示页面
        document.body.classList.remove('page-preload');
    }
});

优化方案二：简化版（仅页面整体淡入） #

如果不需要子元素单独动画，只需要整个页面平滑淡入，那可以更简洁，完全不用遍历子元素：

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            @keyframes pageFadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            body {
                opacity: 0; /* 初始隐藏页面 */
            }
            .page-fade-in {
                animation: pageFadeIn 0.5s forwards;
            }
        </style>
        <script type="text/javascript" src="scripts/session_startup_animation.js"></script>
    </head>
    <body>
        <p>Things that are incredible.</p>
        <p>Other better things.</p>
    </body>
</html>

session_startup_animation.js

window.addEventListener('DOMContentLoaded', () => {
    const hasExecuted = sessionStorage.getItem('hasExecutedSessionStartupAnimation');
    
    if (!hasExecuted) {
        document.body.classList.add('page-fade-in');
        sessionStorage.setItem('hasExecutedSessionStartupAnimation', 'true');
    } else {
        document.body.style.opacity = 1;
    }
});

额外小提示 #

• 尽量避免用!important，这里用它是为了确保预加载状态能覆盖子元素的其他样式，如果你能控制所有子元素的初始样式，也可以去掉。
• 测试时记得清除sessionStorage（浏览器控制台执行sessionStorage.clear()），不然会话内只会执行一次动画，看不到修改后的效果。

备注：内容来源于stack exchange，提问作者MonsieurMachine