Promise 可封装 CSS 动画并链式调用实现精确顺序播放，通过监听 transitionend/animationend 事件 resolve；支持 Promise.all 并行+串行混合控制，以及 async/await 语法提升可读性与错误处理能力。
Promise 可以通过 .then() 链式调用，将多个动画的启动时机精确串联，实现“前一个结束、后一个开始”的异步过渡效果。关键在于：每个动画返回一个 Promise，在 resolve 时触发下一个动画。
用 Promise 封装单个 CSS 动画
原生 CSS 动画（如 transition 或 @keyframes）本身不返回 Promise，需手动包装。监听 transitionend 或 animationend 事件，在回调中 resolve：
function animateElement(el, className) {
return new Promise(resolve => {
el.classList.add(className);
const handler = () => {
el.classList.remove(className);
el.removeEventListener('transitionend', handler);
resolve();
};
el.addEventListener('transitionend', handler);
});
}
这样每次调用 animateElement(el, 'fade-in') 都返回一个 Promise，可被链式使用。
链式调用多个动画（顺序播放）
把多个封装好的动画函数用 .then() 连接，自然形成时间序列：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
animateElement(box1, 'slide-left')
.then(() => animateElement(box2, 'fade-in'))
.then(() => animateElement(box3, 'scale-up'))
.then(() => console.log('全部动画完成'));
- 每个
.then()的回调只在前一个动画resolve后执行，确保严格顺序 - 无需手动计时（如
setTimeout），避免因样式计算延迟或设备性能差异导致的错位 - 若某步失败（如元素不存在），可用
.catch()统一处理
进阶：并行 + 串行混合控制
需要“先让 A 和 B 同时动，等都结束再启动 C”？可用 Promise.all() 聚合并发动画：
Promise.all([
animateElement(box1, 'spin'),
animateElement(box2, 'pulse')
]).then(() => animateElement(box3, 'bounce'))
.then(() => console.log('组合动画完成'));
也可嵌套使用，比如：A → (B 和 C 并行) → D，结构清晰，逻辑可控。
配合 async/await 写法更直观
用 async/await 替代链式写法，语义更接近同步流程：
async function runAnimationSequence() {
await animateElement(box1, 'slide-in');
await animateElement(box2, 'fade-in');
await animateElement(box3, 'rotate');
console.log('序列完成');
}
runAnimationSequence();
- 代码线性可读，调试友好
- 支持
try/catch捕获任意一步异常 - 仍基于 Promise，与现有 Promise 工具（如
Promise.race做超时控制）完全兼容
