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