应使用 Map 而非普通对象存储 DOM 节点快照，因 Map 支持节点作键实现精准对齐；需在重绘前用 getBoundingClientRect 与 getComputedStyle 采集，并配合 WeakMap 或手动清理防泄漏；FLIP 动画通过 first/last 快照计算位移差并 invert 补偿，结束后清空 Map。
可以直接用 Map 存储 DOM 节点及其动画前的布局快照（如 getBoundingClientRect()、computedStyle 等），但必须搭配 WeakMap 或手动清理策略，否则容易引发内存泄漏。关键不在于“存”，而在于“何时取、如何比、怎么播”。
为什么不用普通对象而选 Map
普通对象会把 DOM 节点转为字符串（如 "[object HTMLDivElement]"）作 key，所有节点都变成同一个 key，完全无法区分。而 Map 支持任意类型作键，包括原始 DOM 节点本身——这是实现“节点对齐”的前提。
-
Map的键是强引用，适合短期、受控生命周期的快照（例如一次 FLIP 动画周期） -
WeakMap的键是弱引用，适合长期绑定状态（如每个节点的默认动效配置），DOM 被移除后自动回收，无需手动清理 - 避免用
{ [node]: data }这类计算属性写法——它本质仍是字符串键，不可靠
如何安全采集并存储快照
快照必须在浏览器重绘前、DOM 属性已更新但视觉未变化的“临界帧”获取。推荐使用 getComputedStyle + getBoundingClientRect 组合，并统一存入 Map：
- 在数据变更后、强制重排前调用
$nextTick（Vue）或requestAnimationFrame回调首帧 - 立即遍历目标节点列表，对每个节点执行：
map.set(node, { rect: node.getBoundingClientRect(), style: getComputedStyle(node) }) - 若涉及多个阶段（如列表重排），建议用不同 Map 区分：一个存 First，一个存 Last，避免覆盖
如何用快照驱动 FLIP 过渡
FLIP 的核心是“反向补偿”。拿到 First 和 Last 快照后，计算位移差并应用 invert 变换：
- 从 First Map 中读出原始位置，从 Last Map 中读出目标位置
- 计算偏移：
dx = lastRect.left - firstRect.left，dy = lastRect.top - firstRect.top - 对节点设置
transform: translate(-dx, -dy)，让它视觉上“回到起点” - 再移除 transform（或用 Web Animations API 播放回目标位置），触发 transition 或 animation
- 动画结束后，清空本次使用的两个 Map，防止累积冗余数据
注意事项与边界处理
真实场景中节点可能被增删、复用或异步渲染，需额外防护：
- 对动态列表，快照 Map 应与当前渲染数据一一对应；避免用 index 做 key，改用业务 ID 或
node.dataset.id - 监听
MutationObserver，当节点从 DOM 移除时，从 Map 中delete对应项（仅适用于 Map；WeakMap 无需此操作） - 慎用
offsetWidth/Height触发重排；优先用getBoundingClientRect，它更稳定且不强制同步布局 - 若节点含 transform，快照中的
rect已含变换效果，invert 阶段需叠加计算，建议统一用transform处理位移，避免混用top/left
