自定义事件驱动动画通过CustomEvent实现精准控制，支持多元素协同节奏、共享元素转场及容错中止机制。
自定义事件驱动的动画序列，核心在于把动画触发权交给开发者可控的逻辑节点，而不是依赖时间或滚动位置。这种方式特别适合需要精确控制多元素入场/退场顺序、响应用户操作（如点击、表单提交、状态切换）或与其他业务逻辑强耦合的转场场景。
用 CustomEvent 触发统一动画调度
不依赖全局计时器或监听器，而是由业务逻辑主动 dispatch 一个自定义事件，再由所有待动画元素监听该事件并执行各自动画：
- 在关键交互点（比如按钮点击后、API 响应成功时）创建并派发事件：
document.dispatchEvent(new CustomEvent('startSequence', { detail: { step: 'loginSuccess' } })) - 每个参与转场的元素（如头像、用户名、菜单栏）用 addEventListener('startSequence', handler) 监听，并在 handler 中调用自己的动画方法（CSS 类切换或 Web Animations API）
- 通过 detail 携带上下文参数（如当前步骤、目标状态），让不同元素能差异化响应
状态同步 + 时间偏移实现协同节奏
多个元素不是简单同时动，而是按角色分工形成视觉节奏。例如：主内容淡入 → 导航项滑入 → 按钮缩放强调：
- 用 React 或 Vue 的响应式状态（如 sequenceStep）统一管理阶段，避免手动维护多个 ref 或 timer ID
- 为每个元素设置 animation-delay（CSS）或 delay 参数（Web Animations API），数值基于其在流程中的序号 × 基础间隔（如 0.1s）
- 退场时反向应用 delay（如最后一个先动），保持节奏一致性
结合 transitionName 实现共享元素级转场
当涉及页面/模块切换且存在视觉连续性元素（如卡片图片、标题文字）时，可复用 Material Design 共享元素思路：
- 出发方元素添加 data-transition-id="user-avatar"，目标方同 id 元素也标记相同属性
- 自定义事件触发后，提取出发方的 getBoundingClientRect() 和样式（scale、opacity），为目标方生成对应动画关键帧
- 用 element.animate() 执行位移+缩放+透明度三重动画，duration 控制在 300–400ms 更符合直觉
容错与中止机制不可少
用户可能中途取消、跳转或重复触发，需防止动画堆叠或状态错乱：
- 每个动画启动前先调用 element.getAnimations().forEach(a => a.cancel()) 清理残留
- 用 AbortController 关联动画与业务请求，请求 abort 时同步终止相关动画
- 监听 animationend 事件做收尾（如显示最终态 DOM、恢复交互态），而非仅靠 setTimeout
