优化用户体验：利用 sessionStorage 管理网页首次加载动画

本文详细探讨了如何利用 `sessionstorage` api 精确控制网页启动动画（splash screen）的播放行为。针对 `localstorage` 导致动画在关闭浏览器后不再显示的问题，教程阐述了 `sessionstorage` 的会话生命周期特性，并提供了具体的 javascript 代码示例，确保用户在每次新会话中都能体验到首次加载动画，从而优化用户体验。

理解网页启动动画的常见挑战

网页启动动画（Splash Screen）是许多现代网站和应用用于提升用户体验的一种方式，它可以在页面内容完全加载或特定初始化任务完成前，向用户展示一个品牌标识或加载提示。然而，如何精确控制其播放逻辑是一个常见的挑战。开发者通常希望动画只在用户首次访问或新会话开始时播放一次，以避免重复播放造成用户困扰。

使用 localStorage 来记录动画是否已播放是一个常见的思路。localStorage 提供了持久化的键值对存储，数据在浏览器关闭后依然保留。这意味着一旦动画被标记为已播放，即使关闭并重新打开浏览器或标签页，localStorage 中的记录依然存在，导致动画不再显示。这对于希望用户在每次新会话中都能看到启动动画的场景来说，显然不是理想的解决方案。

sessionStorage：会话级数据存储的解决方案

为了解决 localStorage 的持久性问题，我们可以转向使用 sessionStorage。sessionStorage 也是一种客户端存储机制，与 localStorage 的主要区别在于其数据生命周期：

• localStorage: 数据永久存储，除非手动清除或通过代码移除，否则即使关闭浏览器也会保留。
• sessionStorage: 数据仅在当前浏览器会话期间有效。当用户关闭当前标签页或浏览器窗口时，sessionStorage 中的数据就会被清除。这意味着，如果用户关闭页面后再次打开，就会开始一个新的会话，sessionStorage 中的记录将不复存在，动画将再次播放。

这种会话级的特性使得 sessionStorage 成为控制启动动画在每次新会话中播放一次的理想选择。

实现步骤与代码示例

以下是实现这一功能的具体代码和解释。

HTML 结构

首先，我们需要一个用于承载启动动画的 HTML 元素。这个元素通常覆盖整个视口，并在动画播放完毕后隐藏。

乾坤圈新媒体矩阵管家

新媒体账号、门店矩阵智能管理系统

17

查看详情

<div class="splash">
    <h1 class="splash-content" id="content1">Sub</h1>
    <h1 class="splash-content" id="content2">Sub</h1>
    <h1 class="splash-content" id="content3">Sub</h1>
</div>

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');
    }
});

代码解释：

1. const splash = document.querySelector('.splash');: 获取启动动画容器元素。
2. document.addEventListener('DOMContentLoaded', () => { ... });: 确保在 DOM 完全加载后执行脚本，避免操作未加载的元素。
3. const hasRan = sessionStorage.getItem('hasRan');: 尝试从 sessionStorage 获取名为 hasRan 的项。
4. 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 } 确保事件监听器只触发一次后自动移除。
5. else:
   • 如果 hasRan 存在，说明在当前会话中动画已播放过。
   • splash.classList.add('post_animated');: 直接添加 post_animated 类，立即隐藏启动动画，避免用户等待。

注意事项

1. 动画时长与 setTimeout 匹配: setTimeout 的延迟时间应与你的 CSS 动画总时长相匹配或略长，以确保动画完整播放后再开始隐藏。
2. 用户体验: 启动动画不宜过长，一般建议在 2-5 秒内完成，避免用户等待过久产生不耐烦情绪。
3. 无障碍性: 考虑为动画添加 aria-live 属性或提供跳过动画的选项，以增强无障碍性。
4. 加载指示: 如果动画是作为内容加载指示器，请确保动画结束后页面内容能够及时呈现。
5. 浏览器兼容性: sessionStorage 在所有现代浏览器中都得到了良好支持。

总结

通过将 localStorage 替换为 sessionStorage，我们成功地解决了网页启动动画在关闭标签页后不重置的问题。sessionStorage 的会话级存储特性完美契合了“每次新会话播放一次”的需求，它提供了一种简单而有效的方式来管理客户端数据，从而提升了用户首次访问或新会话开始时的视觉体验。在设计网页交互时，理解 localStorage 和 sessionStorage 的生命周期差异，能够帮助我们更精确地控制用户体验。

以上就是优化用户体验：利用 sessionStorage 管理网页首次加载动画的详细内容，更多请关注php中文网其它相关文章！