使用 sessionStorage 实现网页闪屏动画的会话级控制与重置-js教程-PHP中文网

使用 sessionStorage 实现网页闪屏动画的会话级控制与重置

碧海醫心

发布： 2025-10-24 15:05:00

原创

891人浏览过

使用 sessionStorage 实现网页闪屏动画的会话级控制与重置

本文将指导您如何利用 `sessionstorage` api 精确控制网页闪屏动画的播放行为。通过将闪屏状态存储在会话存储中，您可以确保动画在用户首次访问页面时播放一次，并在关闭浏览器标签页或窗口后自动重置，从而在下次访问时重新显示闪屏，有效解决了 `localstorage` 导致的动画永久不显示问题。

闪屏动画与数据持久化机制

网页闪屏动画（Splash Screen）常用于在页面内容加载或初始化时提供视觉反馈，或展示品牌信息。为了优化用户体验，通常希望闪屏动画只在用户首次访问时播放，而在后续同一会话内的导航中不再出现。然而，当用户关闭浏览器标签页或窗口后，如果希望闪屏动画在下次重新打开页面时再次播放，就需要一种合适的机制来管理其播放状态。

最初，开发者可能会倾向于使用 localStorage 来记录闪屏是否已播放。localStorage 能够实现数据的持久化存储，即使浏览器关闭，数据也不会丢失。但这恰恰导致了问题：一旦闪屏被标记为已播放，即使关闭并重新打开浏览器，它也不会再次出现。为了实现“关闭标签页后重置”的需求，我们需要更精细的数据持久化控制。

localStorage 与 sessionStorage：核心差异

理解 localStorage 和 sessionStorage 的区别是解决此问题的关键：

localStorage (本地存储)：
- 数据以键值对的形式存储在浏览器中。
- 数据永久保存，没有过期时间。除非用户手动清除浏览器数据，或通过 JavaScript 代码删除，否则数据会一直存在。
- 数据在所有同源窗口和标签页之间共享。
- 适用于需要长期保存的用户偏好设置、离线数据等。
sessionStorage (会话存储)：
- 数据也以键值对的形式存储在浏览器中。
- 数据仅在当前浏览器会话期间有效。这意味着当用户关闭浏览器标签页或窗口时，所有 sessionStorage 中的数据都会被清除。
- 数据在不同的标签页或窗口之间是隔离的，即使是同源页面，每个标签页也有独立的 sessionStorage。
- 适用于需要在单个会话中保持状态的数据，例如表单数据、购物车内容等。

根据我们的需求，即闪屏状态在关闭标签页后重置，sessionStorage 是理想的选择。

构建闪屏动画的基础结构

首先，我们需要一个基本的 HTML 结构来承载闪屏内容，以及相应的 CSS 样式来定义闪屏的外观和动画效果。

闪念贝壳

闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。

查看详情

HTML 结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闪屏动画示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="splash">
        <h1 class="splash-content" id="content1">欢迎</h1>
        <h1 class="splash-content" id="content2">来到</h1>
        <h1 class="splash-content" id="content3">我的世界</h1>
    </div>

    <main>
        <!-- 页面主要内容 -->
        <h1>这是页面的主要内容</h1>
        <p>闪屏动画播放完毕后，您将看到这里。</p>
        <p>尝试关闭此标签页后重新打开，观察闪屏是否会再次播放。</p>
    </main>

    <script src="script.js"></script>
</body>
</html>

登录后复制

CSS 样式与动画示例 (style.css)：

body {
    margin: 0;
    font-family: sans-serif;
    overflow-x: hidden; /* 防止横向滚动 */
}

/* 闪屏容器样式 */
.splash {
    background: black;
    z-index: 2; /* 确保在其他内容之上 */
    display: flex; /* 使用 flexbox 居中内容 */
    flex-direction: column; /* 垂直排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    width: 100%;
    height: 100vh; /* 占据整个视口高度 */
    position: fixed; /* 固定在视口 */
    top: 0;
    left: 0;
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* 隐藏时的过渡效果 */
}

/* 闪屏内容样式 */
.splash-content {
    color: white;
    /* 初始位置，会被动画覆盖 */
    transform: translateY(11em); 
    opacity: 0; /* 初始不可见 */
    margin: 0.5em 0;
}

/* 闪屏隐藏时的样式 */
.splash.display-none {
    opacity: 0;
    z-index: 0; /* 隐藏后降低 z-index */
    transform: translateY(-100%); /* 向上滑动隐藏 */
}

/* 动画结束后彻底移除，防止遮挡页面点击 */
.splash.post_animated {
    display: none;
}

/* 各个内容的入场动画 */
#content1 { animation: come-in-first 2s ease-in forwards; }
#content2 { animation: come-in-second 3s ease-in forwards; }
#content3 { animation: come-in-third 4s ease-in forwards; }

/* 关键帧动画定义 */
@keyframes come-in-first {
    0% { transform: translateY(13em); opacity: 0; }
    100% { transform: translateY(11em); opacity: 1; }
}

@keyframes come-in-second {
    0%, 50% { transform: translateY(11.5em); opacity: 0; }
    100% { transform: translateY(11em); opacity: 1; }
}

@keyframes come-in-third {
    0%, 60% { transform: translate(4px, 11.5em); opacity: 0; }
    100% { transform: translate(4px, 11em); opacity: 1; }
}

登录后复制

CSS 样式说明：

.splash 类定义了闪屏容器的全局样式，包括背景、定位、尺寸以及内容居中方式。
transition 属性为闪屏隐藏时提供了平滑的过渡效果。
.splash.display-none 用于在动画播放完毕后，通过改变 opacity 和 transform 来视觉上隐藏闪屏。
.splash.post_animated 在 display-none 的过渡完成后，彻底将闪屏元素从文档流中移除 (display: none;)，以确保它不会阻挡用户与页面内容的交互。
@keyframes 定义了每个 h1 元素的入场动画，forwards 关键字确保动画结束后元素保持在最终状态。

JavaScript 逻辑：实现会话级控制

现在，我们将实现核心的 JavaScript 逻辑 (script.js)，利用 sessionStorage 来控制闪屏的播放。

const splash = document.querySelector('.splash');
// 检查 sessionStorage 中是否有 'hasRan' 标记
const hasSplashPlayed = sessionStorage.getItem('hasRan');

if (!hasSplashPlayed) {
    // 如果本会话中闪屏未播放过
    document.addEventListener('DOMContentLoaded', () => {
        // 确保DOM加载完成后执行动画
        // 闪屏动画持续一段时间后，开始隐藏
        setTimeout(() => {
            splash.classList.add('display-none'); // 添加隐藏类，触发过渡动画

            // 监听隐藏过渡动画结束事件，彻底移除元素
            splash.addEventListener('transitionend', () => {
                splash.classList.add('post_animated');
            }, { once: true }); // { once: true } 确保事件只触发一次
        }, 6000); // 假设闪屏动画总时长为6秒，之后开始隐藏

        // 标记本会话已播放闪屏
        sessionStorage.setItem('hasRan', 'true'); 
    });
} else {
    // 如果本会话已播放过闪屏，则直接隐藏
    // 立即添加隐藏和彻底移除的类，跳过动画
    splash.classList.add('display-none');
    splash.classList.add('post_animated');
}

登录后复制

JavaScript 逻辑说明：

获取元素与检查状态：首先获取 .splash 元素，并检查 sessionStorage.getItem('hasRan') 来判断当前会话中闪屏是否已播放。
首次播放逻辑：
- 如果 hasSplashPlayed 为空（即未播放过），则在 DOMContentLoaded 事件触发后（确保页面DOM已完全加载），通过 setTimeout 延迟执行隐藏逻辑。
- setTimeout 的延迟时间应略大于闪屏动画的总时长，以确保动画完整播放。
- splash.classList.add('display-none') 会触发 CSS 中定义的隐藏过渡动画。
- 为了在过渡动画结束后彻底移除闪屏元素，我们监听 transitionend 事件，并在事件触发时添加 post_animated 类。{ once: true } 选项确保此事件监听器在触发一次后自动移除，避免不必要的资源占用。
- 最后，通过 sessionStorage.setItem('hasRan', 'true') 标记本会话闪屏已播放。
后续访问逻辑：
- 如果 hasSplashPlayed 不为空（即已播放过），则直接添加 display-none 和 post_animated 类，使闪屏立即隐藏并从文档流中移除，跳过动画。

注意事项与最佳实践

动画时长控制：合理设置闪屏动画的播放时长。过长的动画可能导致用户等待焦虑，影响用户体验。
用户体验：对于复杂的闪屏，可以考虑提供一个“跳过”按钮，允许用户提前进入页面内容。
性能考量：确保 CSS 动画流畅，避免使用复杂的 JavaScript 动画导致页面卡顿。尽量利用 CSS 的硬件加速特性。
post_animated 的重要性：在动画结束后，使用 display: none; 彻底移除闪屏元素至关重要。否则，即使 opacity 为 0，该元素仍然会占据空间并可能阻挡用户点击其下方的页面内容。
回退机制：如果用户禁用了 JavaScript，闪屏可能会永久显示。可以考虑提供一个 <noscript> 标签内的提示，或在 CSS 中设置一个默认的隐藏状态，仅在 JS 启用时才播放动画。
其他持久化方法：
- Cookie：也可以用于存储闪屏状态，但通常用于