本文将指导您如何利用 `sessionstorage` api 精确控制网页闪屏动画的播放行为。通过将闪屏状态存储在会话存储中，您可以确保动画在用户首次访问页面时播放一次，并在关闭浏览器标签页或窗口后自动重置，从而在下次访问时重新显示闪屏，有效解决了 `localstorage` 导致的动画永久不显示问题。
闪屏动画与数据持久化机制
网页闪屏动画（Splash Screen）常用于在页面内容加载或初始化时提供视觉反馈，或展示品牌信息。为了优化用户体验，通常希望闪屏动画只在用户首次访问时播放，而在后续同一会话内的导航中不再出现。然而，当用户关闭浏览器标签页或窗口后，如果希望闪屏动画在下次重新打开页面时再次播放，就需要一种合适的机制来管理其播放状态。
最初，开发者可能会倾向于使用 localStorage 来记录闪屏是否已播放。localStorage 能够实现数据的持久化存储，即使浏览器关闭，数据也不会丢失。但这恰恰导致了问题：一旦闪屏被标记为已播放，即使关闭并重新打开浏览器，它也不会再次出现。为了实现“关闭标签页后重置”的需求，我们需要更精细的数据持久化控制。
localStorage 与 sessionStorage：核心差异
理解 localStorage 和 sessionStorage 的区别是解决此问题的关键：
-
localStorage (本地存储)：
- 数据以键值对的形式存储在浏览器中。
- 数据永久保存，没有过期时间。除非用户手动清除浏览器数据，或通过 javaScript 代码删除，否则数据会一直存在。
- 数据在所有同源窗口和标签页之间共享。
- 适用于需要长期保存的用户偏好设置、离线数据等。
-
sessionStorage (会话存储)：
- 数据也以键值对的形式存储在浏览器中。
- 数据仅在当前浏览器会话期间有效。这意味着当用户关闭浏览器标签页或窗口时，所有 sessionStorage 中的数据都会被清除。
- 数据在不同的标签页或窗口之间是隔离的，即使是同源页面，每个标签页也有独立的 sessionStorage。
- 适用于需要在单个会话中保持状态的数据，例如表单数据、购物车内容等。
根据我们的需求，即闪屏状态在关闭标签页后重置，sessionStorage 是理想的选择。
构建闪屏动画的基础结构
首先，我们需要一个基本的 html 结构来承载闪屏内容，以及相应的 css 样式来定义闪屏的外观和动画效果。
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：也可以用于存储闪屏状态，但通常用于