本文详细探讨了如何利用 `sessionstorage` api 精确控制网页启动动画（splash screen）的播放行为。针对 `localstorage` 导致动画在关闭浏览器后不再显示的问题，教程阐述了 `sessionstorage` 的会话生命周期特性，并提供了具体的 javascript 代码示例，确保用户在每次新会话中都能体验到首次加载动画，从而优化用户体验。
理解网页启动动画的常见挑战
网页启动动画（Splash Screen）是许多现代网站和应用用于提升用户体验的一种方式，它可以在页面内容完全加载或特定初始化任务完成前，向用户展示一个品牌标识或加载提示。然而，如何精确控制其播放逻辑是一个常见的挑战。开发者通常希望动画只在用户首次访问或新会话开始时播放一次，以避免重复播放造成用户困扰。
使用 localStorage 来记录动画是否已播放是一个常见的思路。localStorage 提供了持久化的键值对存储，数据在浏览器关闭后依然保留。这意味着一旦动画被标记为已播放，即使关闭并重新打开浏览器或标签页，localStorage 中的记录依然存在，导致动画不再显示。这对于希望用户在每次新会话中都能看到启动动画的场景来说，显然不是理想的解决方案。
sessionStorage：会话级数据存储的解决方案
为了解决 localStorage 的持久性问题，我们可以转向使用 sessionStorage。sessionStorage 也是一种客户端存储机制，与 localStorage 的主要区别在于其数据生命周期：
localStorage: 数据永久存储，除非手动清除或通过代码移除，否则即使关闭浏览器也会保留。sessionStorage: 数据仅在当前浏览器会话期间有效。当用户关闭当前标签页或浏览器窗口时，sessionStorage 中的数据就会被清除。这意味着，如果用户关闭页面后再次打开，就会开始一个新的会话，sessionStorage 中的记录将不复存在，动画将再次播放。
这种会话级的特性使得 sessionStorage 成为控制启动动画在每次新会话中播放一次的理想选择。
实现步骤与代码示例
以下是实现这一功能的具体代码和解释。
HTML 结构
首先，我们需要一个用于承载启动动画的 HTML 元素。这个元素通常覆盖整个视口，并在动画播放完毕后隐藏。
Sub
Sub
Sub
CSS 样式
CSS 部分定义了启动动画的视觉效果和隐藏逻辑。.splash 类定义了全屏背景和初始状态，而 .splash.display-none 和 .splash.post_animated 则用于在动画结束后逐步隐藏或彻底移除元素。@keyframes 定义了文本内容的入场动画。
.splash { background: black; z-index: 2; text-align: center; justify-content: center; align-items: center; width: 100%; height: 100vh; transition: 4s; /* 初始过渡，可能用于背景淡出 */ display: flex; /* 确保内容居中 */ flex-direction: column; /* 垂直排列内容 */}.splash-content { color: white; transform: translateY(11em); /* 初始位置 */}.splash.display-none { opacity: 0; z-index: 0; transform: translateY(-100%); /* 向上滑出 */ transition: 1.5s; /* 隐藏动画过渡时间 */}.splash.post_animated { display: none; /* 动画结束后彻底移除 */}/* 文本内容的入场动画 */#content1 { animation: come-in-first 2s ease-in;}#content2 { animation: come-in-second 3s ease-in;}#content3 { transform: translate(4px, 11em); /* 调整初始位置 */ animation: come-in-third 4s ease-in;}@keyframes come-in-first { 0% { transform: translateY(13em); opacity: 0; }}@keyframes come-in-second { 0%, 50% { /* 延迟开始 */ transform: translateY(11.5em); opacity: 0; }}@keyframes come-in-third { 0%, 60% { /* 延迟开始 */ transform: translate(4px, 11.5em); opacity: 0; }}
JavaScript 逻辑
核心逻辑在于 JavaScript，它负责检查 sessionStorage、控制动画播放和隐藏。
const splash = document.querySelector('.splash');// 页面内容加载完毕后执行document.addEventListener('DOMContentLoaded', () => { // 检查 sessionStorage 中是否有 'hasRan' 标记 const hasRan = sessionStorage.getItem('hasRan'); if (!hasRan) { // 如果没有标记，说明是新会话，播放动画 sessionStorage.setItem('hasRan', 'true'); // 设置标记为已播放 // 动画播放结束后隐藏 splash screen // 这里的 6000ms 应略大于或等于最长动画的持续时间 setTimeout(() => { splash.classList.add('display-none'); // 触发隐藏过渡 // 过渡结束后彻底移除元素，避免占用布局 splash.addEventListener('transitionend', () => { splash.classList.add('post_animated'); }, { once: true }); // 确保事件只触发一次 }, 6000); } else { // 如果有标记，说明已播放过，直接隐藏 splash screen splash.classList.add('post_animated'); }});
代码解释：
const splash = document.querySelector(‘.splash’);: 获取启动动画容器元素。document.addEventListener(‘DOMContentLoaded’, () => { … });: 确保在 DOM 完全加载后执行脚本，避免操作未加载的元素。const hasRan = sessionStorage.getItem(‘hasRan’);: 尝试从 sessionStorage 获取名为 hasRan 的项。if (!hasRan):如果 hasRan 不存在（即 null），说明这是当前会话的首次加载。sessionStorage.setItem(‘hasRan’, ‘true’);: 设置 hasRan 为 true，标记为已播放，防止在同一会话中重复播放。setTimeout(() => { … }, 6000);: 在动画播放足够长的时间（例如 6 秒，这应该根据你的 CSS 动画时长来调整）后，添加 display-none 类，触发 CSS 的隐藏过渡效果。splash.addEventListener(‘transitionend’, () => { … }, { once: true });: 监听 display-none 过渡结束后触发的 transitionend 事件，然后添加 post_animated 类，彻底将元素从文档流中移除，释放空间并提高性能。{ once: true } 确保事件监听器只触发一次后自动移除。else:如果 hasRan 存在，说明在当前会话中动画已播放过。splash.classList.add(‘post_animated’);: 直接添加 post_animated 类，立即隐藏启动动画，避免用户等待。
注意事项
动画时长与 setTimeout 匹配: setTimeout 的延迟时间应与你的 CSS 动画总时长相匹配或略长，以确保动画完整播放后再开始隐藏。用户体验: 启动动画不宜过长，一般建议在 2-5 秒内完成，避免用户等待过久产生不耐烦情绪。无障碍性: 考虑为动画添加 aria-live 属性或提供跳过动画的选项，以增强无障碍性。加载指示: 如果动画是作为内容加载指示器，请确保动画结束后页面内容能够及时呈现。浏览器兼容性: sessionStorage 在所有现代浏览器中都得到了良好支持。
总结
通过将 localStorage 替换为 sessionStorage，我们成功地解决了网页启动动画在关闭标签页后不重置的问题。sessionStorage 的会话级存储特性完美契合了“每次新会话播放一次”的需求，它提供了一种简单而有效的方式来管理客户端数据，从而提升了用户首次访问或新会话开始时的视觉体验。在设计网页交互时，理解 localStorage 和 sessionStorage 的生命周期差异，能够帮助我们更精确地控制用户体验。
以上就是优化用户体验：利用 sessionStorage 管理网页首次加载动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532435.html
微信扫一扫 
支付宝扫一扫 
