本文介绍一种基于 localstorage 的可靠方案，确保落地页的 css 动画在用户每次访问时最多每小时执行一次，避免重复触发带来的视觉干扰，兼顾用户体验与实现简洁性。
本文介绍一种基于 localstorage 的可靠方案，确保落地页的 css 动画在用户每次访问时最多每小时执行一次，避免重复触发带来的视觉干扰，兼顾用户体验与实现简洁性。
在构建现代营销型落地页时，首屏动画（如标题渐显、主视觉淡入）能有效提升视觉吸引力。但若用户频繁刷新、返回或切换标签页，动画反复播放极易造成干扰，甚至影响可访问性。单纯依赖 setInterval（如每小时调用一次动画函数）并不可靠——它无法跨页面生命周期持久化，一旦刷新或关闭标签，计时器即被重置，导致动画立即再次触发。
真正可行的解法是：将“上次动画执行时间”作为状态持久化存储，并在每次页面加载时主动校验。localStorage 是最轻量、兼容性最佳的选择（支持所有现代浏览器，且无过期限制）。
以下是优化后的完整实现：
function runAnimation() {
const lastAnimatedAt = localStorage.getItem('lastAnimatedAt');
const now = new Date();
// 检查是否已过去至少 1 小时
if (lastAnimatedAt) {
const lastTime = new Date(lastAnimatedAt);
if (now - lastTime < 3600000) { // 3600000ms = 1 hour
return; // 跳过动画
}
}
// 获取目标元素（注意：选择器需与 HTML 结构匹配）
const textElement = document.querySelector('.text');
const mainElement = document.querySelector('main');
if (!textElement || !mainElement) return;
// 添加动画类（触发 CSS 动画）
textElement.classList.add('text-animation');
mainElement.classList.add('herolanding-animation');
// 动画结束后自动清理类名（防样式残留）
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 时间戳（使用 ISO 字符串，便于调试和跨时区一致性）
localStorage.setItem('lastAnimatedAt', now.toISOString());
}
// 页面加载完成时立即执行检查（关键！）
document.addEventListener('DOMContentLoaded', runAnimation);
// （可选）补充定时器：若用户长时间停留首页，可尝试每分钟检查一次是否到点
// 注意：此逻辑仅作兜底，核心判断始终以 localStorage 为准
setInterval(() => {
const last = localStorage.getItem('lastAnimatedAt');
if (!last || new Date() - new Date(last) >= 3600000) {
runAnimation();
}
}, 60000); // 每分钟检查一次配套 CSS 需稍作调整，确保动画仅执行单次且不循环：
立即学习“前端免费学习笔记（深入）”；
.text {
width: 100%;
position: relative;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
color: black;
text-align: center;
/* 移除默认 animation 声明，由 JS 控制 */
z-index: 1000;
}
.text-animation {
animation: herot 1s forwards;
}
@keyframes herot {
0% { font-size: 15rem; opacity: 0; }
100% { font-size: 2rem; opacity: 1; }
}
.herolanding-animation {
animation: herolanding 1.1s ease-out forwards;
}
@keyframes herolanding {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
main {
opacity: 0; /* 初始隐藏，由动画控制显隐 */
}HTML 结构保持简洁，确保类名准确对应：
<div class="text"> <a>Hello</a> </div> <main> <a>body</a> </main>
✅ 关键注意事项：
- 不要在 <head> 中直接调用 runAnimation()：务必等待 DOM 加载完成（使用 DOMContentLoaded），否则 querySelector 可能返回 null。
- localStorage 是域级存储：同一域名下所有页面共享该键值，适合全站统一策略；如需页面级隔离，可将 key 改为 'lastAnimatedAt_landing'。
- 时间精度足够：Date.now() 或 toISOString() 在毫秒级已远超 1 小时所需精度，无需引入外部库。
- 无障碍友好：动画非关键功能，未触发时页面仍完全可用；如需进一步优化，可监听 prefers-reduced-motion 并跳过动画。
- 服务端渲染（SSR）场景：若使用 Next.js/Nuxt 等框架，需确保逻辑仅在客户端执行（例如 if (typeof window !== 'undefined') 包裹）。
该方案去除了冗余定时器依赖，以“按需校验 + 持久化状态”为核心，稳定、轻量、零第三方依赖，是落地页动画节流的最佳实践。
