本文将指导您如何利用 `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，闪屏可能会永久显示。可以考虑提供一个 标签内的提示，或在 CSS 中设置一个默认的隐藏状态，仅在 JS 启用时才播放动画。其他持久化方法：Cookie：也可以用于存储闪屏状态，但通常用于
以上就是使用 sessionStorage 实现网页闪屏动画的会话级控制与重置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532183.html
微信扫一扫 
支付宝扫一扫 
