通过监听 animationend 事件，可在移除动画类前等待当前动画周期完成，避免突兀中断，提升媒体播放器元信息滚动的视觉连贯性。
通过监听 `animationend` 事件，可在移除动画类前等待当前动画周期完成，避免突兀中断，提升媒体播放器元信息滚动的视觉连贯性。
在构建媒体播放器时，常需为正在播放的歌曲标题实现“跑马灯”式滚动效果（如使用 @keyframes + transform: translateX）。但若用户点击暂停按钮时直接移除 .scrolling 类，CSS 动画会立即终止，导致文字卡在中间位置，破坏用户体验。
理想行为是：暂停操作不打断当前动画，而是让其完整播放至终点（即 100% 关键帧），再优雅地停止。这无法仅靠 classList.remove() 实现，而需结合事件驱动逻辑。
✅ 正确实现方式：动画结束钩子
核心思路是——暂停时不立刻移除类，而是注册一次性的 animationend 监听器，在动画自然结束后再清理样式：
const MetaScroll = document.getElementById("MetaScroll");
const PlayButton = document.getElementById("PlayButton");
// 用于判断当前状态：是否正在播放（true = 播放中，false = 已暂停）
let isPlaying = false;
function playPause() {
if (isPlaying) {
// 暂停：保留动画继续运行，监听其自然结束
MetaScroll.addEventListener('animationend', onAnimationEnd, { once: true });
} else {
// 播放：添加动画类，并确保旧监听器已清除（防重复绑定）
MetaScroll.classList.add('scrolling');
}
// 切换按钮图标
PlayButton.classList.toggle('fa-play');
PlayButton.classList.toggle('fa-pause');
// 更新播放状态
isPlaying = !isPlaying;
}
function onAnimationEnd() {
MetaScroll.classList.remove('scrolling');
}
? 关键细节说明：
- 使用
{ once: true }选项自动移除监听器，避免内存泄漏或多次触发；isPlaying状态变量替代模糊的toggle逻辑，使控制流清晰可维护；- 不在
pause分支中调用removeEventListener（因尚未添加），而是在播放分支确保无冗余监听。
⚠️ 注意事项与优化建议
-
动画必须可结束：你的
@keyframes b-text-scroll当前设为infinite，这会导致animationend永不触发。请修改为单次执行动画：.scrolling { transform: translateX(0); animation: b-text-scroll 5s linear 1 forwards; /* ← 改为 1 次，且加 forwards 保持终点状态 */ }forwards确保动画结束后元素停留在100%的translate3d(-100%, 0, 0)位置，视觉上更自然。 -
兼容性保障：
animationend在现代浏览器中广泛支持，但如需兼容旧版 Safari，可补充webkitAnimationEnd：const endEvents = ['animationend', 'webkitAnimationEnd']; endEvents.forEach(event => MetaScroll.addEventListener(event, onAnimationEnd, { once: true }) ); -
防止快速点按误触发：若用户连续点击播放/暂停，建议在
onAnimationEnd中校验当前状态，避免已恢复播放后仍误删类：function onAnimationEnd() { if (!isPlaying) { // 仅当确实处于暂停态才移除 MetaScroll.classList.remove('scrolling'); } }
✅ 总结
让动画“善始善终”并非 CSS 原生能力，而是 JavaScript 与 CSS 协同的设计模式：
✅ 用 animation: ... 1 替代 infinite；
✅ 用 animationend + { once: true } 实现精准收尾；
✅ 用明确的状态变量（isPlaying）替代隐式 toggle；
✅ 结合 forwards 保持最终视觉状态。
这样，你的媒体元信息滚动将兼具专业感与细腻的交互反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
