本文介绍一种基于 localstorage 的可靠方案，确保落地页的 css 动画在用户每次访问时最多每小时运行一次，避免频繁刷新或返回页面导致的干扰性重复播放。
本文介绍一种基于 localstorage 的可靠方案，确保落地页的 css 动画在用户每次访问时最多每小时运行一次，避免频繁刷新或返回页面导致的干扰性重复播放。
在构建高转化率的落地页时，首屏动画是吸引用户注意力的重要手段；但若动画在每次页面加载（如刷新、前进/后退、重新打开标签页）时都立即触发，反而会降低体验，甚至引发视觉疲劳。理想方案是：动画仅在用户首次访问或距上次播放已满一小时后才执行——而这一逻辑无法仅靠 CSS 或 setInterval 实现，必须结合浏览器持久化存储与时间校验。
✅ 正确实现思路：以时间戳为凭证，用 localStorage 做“状态锁”
核心逻辑不是「定时播放」，而是「按需校验 + 条件触发」：
- 每次页面加载时，读取 localStorage 中记录的上一次动画时间；
- 若该时间距当前不足 1 小时（3600000 ms），则跳过动画；
- 否则执行动画，并立即将当前时间写入 localStorage；
- 无需 setInterval 主动轮询（它在页面卸载后即失效，且无实际必要）。
以下是优化后的完整 JavaScript 实现：
function runAnimationOncePerHour() {
const lastAnimatedAt = localStorage.getItem('lastAnimatedAt');
const now = new Date();
// 校验：是否已满足 1 小时间隔
if (lastAnimatedAt) {
const lastTime = new Date(lastAnimatedAt);
if (now - lastTime < 3600000) return; // 小于 1 小时，跳过
}
// 获取并触发动画元素
const textElement = document.querySelector('.text');
const mainElement = document.querySelector('main');
if (!textElement || !mainElement) return;
// 添加动画类（CSS 中需定义 animation-iteration-count: 1）
textElement.classList.add('text-animation');
mainElement.classList.add('herolanding-animation');
// 清理动画类（推荐使用 animationend，更精准于实际结束时刻）
const cleanup = () => {
textElement.classList.remove('text-animation');
mainElement.classList.remove('herolanding-animation');
};
textElement.addEventListener('animationend', cleanup, { once: true });
mainElement.addEventListener('animationend', cleanup, { once: true });
// ✅ 关键：动画开始后立即记录时间（非结束时！）
// 避免用户快速关闭页面导致时间未保存，造成下次仍可播放
localStorage.setItem('lastAnimatedAt', now.toISOString());
}
// 页面加载完成后立即执行校验与条件播放
document.addEventListener('DOMContentLoaded', runAnimationOncePerHour);? CSS 动画注意事项（务必检查）
请确保你的 CSS 动画明确声明单次播放，并移除可能干扰逻辑的隐式循环：
立即学习“前端免费学习笔记（深入）”；
.text-animation {
animation: herot 1s forwards;
animation-iteration-count: 1; /* 必须显式设置 */
animation-fill-mode: forwards; /* 保持最终状态 */
}
.herolanding-animation {
animation: herolanding 1.1s forwards;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes herot {
0% { font-size: 15rem; opacity: 0; }
100% { font-size: 0; opacity: 1; }
}
@keyframes herolanding {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}⚠️ 注意事项：
- ❌ 不要依赖 setInterval(runAnimation, 3600000)：它在页面关闭后即失效，且无法跨会话生效；
- ✅ localStorage 是轻量、跨会话、同源持久化的首选（有效期至用户手动清除）；
- ✅ 时间使用 toISOString() 存储，兼容性好且便于调试；
- ✅ 动画时间戳应在动画启动瞬间写入，而非结束时，防止因用户中途离开导致状态丢失；
- ✅ 建议为 .text 和 main 元素添加 will-change: opacity, transform（如适用）以提升动画性能。
✅ 扩展建议（进阶可选）
- 如需支持多设备同步，可将时间戳存至服务端（配合用户标识 + JWT）；
- 对隐私敏感场景，可降级为 sessionStorage（仅限当前会话有效）；
- 添加 console.debug('Landing animation triggered at:', new Date().toLocaleTimeString()) 便于 QA 验证逻辑。
通过这套方案，你的落地页动画将真正成为「有节制的惊喜」——既保留视觉吸引力，又尊重用户注意力节奏。
