JavaScript动画队列核心是按序执行动画以避免冲突，需手动管理，常用Promise链、async/await或封装队列管理器实现，支持暂停/取消及错误处理。
JavaScript 实现动画队列，核心是**控制多个动画按顺序执行，避免冲突、重叠或丢失状态**。原生不提供内置队列机制，需手动管理执行时机和状态，常用方式包括 Promise 链、回调函数、async/await，以及封装可暂停/取消的动画控制器。
用 Promise 链串联动画
每个动画返回一个 Promise，在 resolve 时触发下一个，天然支持顺序执行：
- 用 requestAnimationFrame 或 CSS transitionend 作为完成信号
- 封装成返回 Promise 的函数，例如
animateElement(el, props, duration) - 链式调用：
animateA().then(() => animateB()).then(() => animateC())
示例（基于 CSS transition）：
function animateTo(el, styles) {
return new Promise(resolve => {
Object.assign(el.style, styles);
el.addEventListener('transitionend', () => resolve(), { once: true });
});
}
animateTo(box, { opacity: '0', transform: 'translateX(-100px)' })
.then(() => animateTo(box, { opacity: '1', transform: 'translateX(0)' }))
.then(() => console.log('动画队列完成'));
用 async/await 简化顺序逻辑
比 Promise 链更直观，适合复杂流程或需条件分支的场景：
立即学习“Java免费学习笔记（深入）”；
- 把每个动画包装为 async 函数
- 用 await 显式等待上一个结束，代码线性可读
- 可轻松加入
if、for或try/catch
示例：
async function runAnimationQueue() {
await animateTo(box, { backgroundColor: 'red' });
await delay(300); // 自定义等待函数
await animateTo(box, { fontSize: '24px' });
await animateTo(box, { transform: 'rotate(360deg)' });
}
封装可复用的动画队列管理器
适用于频繁调度多元素、多步骤动画的项目，支持追加、清空、暂停（需配合 cancelAnimationFrame）：
- 维护一个任务数组，每次执行完一个就 shift() 下一个
- 每个任务是
() => Promise，支持传参、错误处理 - 暴露
add(task)、start()、clear()方法
简化版实现：
class AnimationQueue {
constructor() {
this.queue = [];
this.isRunning = false;
}
add(task) {
this.queue.push(task);
if (!this.isRunning) this.start();
return this;
}
start() {
if (this.isRunning || this.queue.length === 0) return;
this.isRunning = true;
const runNext = () => {
if (this.queue.length === 0) {
this.isRunning = false;
return;
}
const task = this.queue.shift();
task().catch(console.error).finally(runNext);
};
runNext();
}
}
// 使用
queue.add(() => animateTo(a, { x: 100 }))
.add(() => animateTo(b, { y: 50 }))
.add(() => delay(200));
注意事项与避坑点
实际开发中容易忽略的关键细节：
-
CSS 动画未启用 transition/transform：确保目标属性可被硬件加速（如用
transform替代left/top），且已设transition -
多次快速触发导致队列堆积：可在添加前
clear()，或加防抖/节流 -
元素在动画中被移除或隐藏：需监听
transitioncancel或手动 reject Promise -
浏览器兼容性：IE 不支持
transitionend，可用setTimeout+ duration 回退
