本文介绍通过 animationend 事件监听 CSS 动画完成时机，替代 setTimeout 实现精准同步的新闻滚动系统，彻底解决因页面失焦、浏览器节流导致的动画与逻辑不同步问题。
本文介绍通过 animationend 事件监听 css 动画完成时机，替代 settimeout 实现精准同步的新闻滚动系统，彻底解决因页面失焦、浏览器节流导致的动画与逻辑不同步问题。
在构建如新闻跑马灯（news ticker）这类依赖定时更新的 UI 组件时，仅靠 JavaScript 的 setTimeout 与 CSS 动画“约定”时间长度（例如都设为 10 秒）存在本质缺陷：浏览器在标签页非激活、系统休眠或资源受限时会主动节流 setTimeout，而 CSS 动画则可能被暂停或延迟渲染，导致两者逐渐脱节——文本在动画中途突变，视觉跳跃、体验断裂。
真正可靠的方案是让 JavaScript 主动响应动画本身的状态变化，即利用原生的 animationend 事件：
<div id="newsTicker"> <div id="newsText">Breaking: New feature launched!</div> </div>
#newsTicker {
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
background: #0a1929;
color: white;
line-height: 50px;
}
#newsText {
position: absolute;
white-space: nowrap;
animation: newsScroll 12s linear infinite;
}
@keyframes newsScroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}const newsTextEl = document.getElementById('newsText');
const newsTicker = document.getElementById('newsTicker');
// 预定义新闻列表
const newsItems = [
"System update deployed successfully.",
"New user onboarding flow is now live.",
"API rate limits increased by 25%.",
"Maintenance scheduled for Sunday 2:00 AM UTC."
];
let currentIndex = 0;
function updateNewsText() {
// 更新文本内容，并重置动画（强制重新播放）
newsTextEl.textContent = newsItems[currentIndex];
newsTextEl.style.animation = 'none'; // 临时清空动画触发重绘
setTimeout(() => {
newsTextEl.style.animation = '';
}, 10);
currentIndex = (currentIndex + 1) % newsItems.length;
}
// 监听 animationend 事件 —— 精准捕获每次动画循环结束
newsTextEl.addEventListener('animationend', () => {
updateNewsText();
});
// 首次初始化（可选：立即开始）
updateNewsText();✅ 关键优势说明：
-
animationend是浏览器原生事件，严格跟随渲染引擎的实际动画生命周期，不受 JS 主线程阻塞或页面可见性影响； - 每次动画自然结束（而非预估时间点）才触发下一条新闻，完全消除累积误差；
- 无需硬编码动画时长，后续修改
@keyframes时间无需同步调整 JS； - 支持多动画片段、
iteration-count控制等复杂场景（本例使用infinite，故每次循环均触发）。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 确保监听元素与实际应用动画的 DOM 节点一致（本例为
#newsText）； - 若使用
animation-fill-mode: forwards或需手动控制动画启停，请注意animationend仅在非无限动画的最后一次迭代后触发； - 为兼容旧版 Safari，可同时监听
webkitAnimationEnd事件（现代项目通常已无需）； - 如需平滑过渡（避免重置动画时的瞬时跳变），可在
updateNewsText()中添加transition: transform 0.3s ease-out配合translateX()动态计算起始位置，但对纯无限滚动场景，强制重置动画更简洁可靠。
通过将业务逻辑与渲染状态解耦并建立事件驱动闭环，你获得的不仅是一个稳定运行的新闻栏，更是一种可复用于轮播图、进度指示器、交互动画等场景的健壮同步范式。
