开发记录：动画与复杂交互链路重构

这篇开发记录用于复盘 M5-4 的背景、目标、执行过程和最终结果。

为什么在 M5-4 补动画与复杂交互

前面的案例已经把页面、组件、SSR、Nuxt 和状态中心都补得比较完整了，但还有一个很重要的高频问题没有单独展开：复杂交互页面。

这类页面的问题往往不是“功能缺失”，而是：

• 一个动作会带动多个区域同时变化
• 动画和业务状态开始相互污染
• 浮层、列表、详情和反馈动画互相耦合
• 页面容器越来越像交互脚本文件

所以 M5-4 的重点，是把动画和复杂交互从“视觉实现”还原成“结构设计”。

这轮做了什么

这轮主要完成了这些事情：

• 新增动画与复杂交互案例文档
• 新增 M5-4 任务拆解文档
• 新增 M5-4 详细设计文档
• 更新里程碑、入口、导航与统一框架
• 将复杂交互型案例正式纳入当前方法库

这轮最重要的决策

决策一：先讲状态链路，再讲动画效果

这轮没有优先讲“动画看起来怎么做”，而是先讲：

• 动画状态和业务状态怎么分离
• 多个浮层怎么统一管理
• 动画请求怎么统一触发
• 为什么需要动画协调层

决策二：选 vue-sell-app 的交互链路作为案例来源

因为它同时具备：

• 购物车数量和金额联动
• 小球下落动画
• 商品详情浮层
• 商家详情浮层
• 列表与购物车之间的状态同步

它非常适合作为“复杂交互链路”案例来源。

决策三：补进 motion-v 的设计视角

本轮没有把重点放在具体库 API 上，但吸收了现代动画库的一些稳定原则，例如：

• 动画值与业务状态分离
• 高频动画优先 transform / opacity
• 动画规则尽量声明式表达

这让案例不只停留在 Vue 2 过渡写法，而能对齐更现代的 Vue / Nuxt 动画设计思路。

本轮自测怎么做

这轮仍然只修改文档，所以自测继续聚焦文档完整性：

• 检查新增 Markdown 文件是否落盘
• 检查本地链接是否全部可解析
• 检查入口页、导航图和总框架是否已经接入新案例
• 检查 M5-4 的任务拆解、详细设计和开发记录是否齐全

本轮结果

M5-4 完成后，当前方法库已经从“页面 / 组件 / 状态 / SSR / Nuxt”这些静态结构设计，继续扩展到了“复杂交互链路设计”。

这意味着后续如果继续扩展：

• 页面切换动画
• 拖拽与排序
• 共享元素过渡
• 动画队列与交互节奏

都已经有了稳定挂载点。