应使用类名切换而非animation-play-state控制旋转，因后者会导致跳帧和Safari兼容问题；通过classList.toggle()同步音频播放状态与rotating类，并配合canplay事件确保加载完成后再启用交互。
直接用 CSS 动画 + audio 元素的播放/暂停状态控制旋转，比 JS 操控 transform 更可靠，也更轻量。
为什么不能只靠 animation-play-state 切换旋转？
很多人试过给唱片元素加 animation: spin 10s linear infinite，再用 JS 切换 animation-play-state: paused/running —— 看似合理，但实际会遇到两个硬伤：
- 暂停时动画时间轴冻结，resume 后继续从冻结点走，导致视觉上“跳帧”，尤其在快速启停时明显
- 部分 Safari 版本对
animation-play-state的响应有延迟或不触发重绘，旋转卡住不动
更稳的做法是：用 JS 控制类名切换，CSS 中用不同 animation 声明分别定义“旋转中”和“静止”状态，强制重置动画时间轴。
如何用 classList.toggle() 同步控制播放与旋转？
核心逻辑是让按钮点击同时触发两件事：音频的 play()/pause()，以及唱片容器的旋转类切换。关键点在于处理 paused 属性而非监听事件：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不要监听
play或pause事件来反向更新 UI —— 它们可能因自动播放策略、用户手势缺失而被拦截，导致状态错位 - 每次点击按钮时，先读取
audio.paused，再决定调用play()还是pause()，并同步操作类名 - 唱片容器（比如
<div class="record">）只需绑定一个rotating类，CSS 里用@keyframes定义完整旋转周期
示例片段：
const audio = document.querySelector('audio');
const record = document.querySelector('.record');
const playBtn = document.querySelector('#play-btn');
playBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(e => console.warn('Playback failed:', e));
record.classList.add('rotating');
} else {
audio.pause();
record.classList.remove('rotating');
}
});
@keyframes spin 的性能与兼容性细节
旋转动画看似简单，但几个参数直接影响流畅度和设备适配：
- 用
transform: rotateZ(360deg)，不是rotate(360deg)—— 显式指定 Z 轴能更好触发 GPU 加速 - 动画时长建议设为可被 60 整除的值（如
6s、12s），避免帧率抖动；太慢（如30s）在低帧率设备上易感知卡顿 - 必须加
will-change: transform到唱片元素上，否则 iOS Safari 可能降级为 CPU 渲染，发热+掉帧 - 不要用
animation-timing-function: steps(1)模拟“机械感”旋转——它会让动画变成离散跳变，失去唱片应有的匀速感
CSS 示例：
.record {
will-change: transform;
}
.record.rotating {
animation: spin 8s linear infinite;
}
@keyframes spin {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(360deg); }
}
音频加载完成前，旋转状态怎么处理？
用户点播放按钮时，如果 audio.readyState < 4（即还没加载完元数据或首帧），play() 会失败，但类名可能已加上，造成“假旋转”。必须拦截并回退：
- 监听
canplay和canplaythrough事件，在它们触发后才允许用户交互（比如移除按钮的disabled状态） - 在
play().catch()中不仅打日志，还要立刻执行record.classList.remove('rotating') - 如果音频源是动态设置的（比如
audio.src = url），记得在赋值后手动调用audio.load()，否则readyState不会更新
这点容易被忽略：很多“旋转不启动”的问题，根源其实是音频没真正加载成功，而不是动画写错了。
