列表增删动画

解决什么问题

列表增删是后台系统里最频繁的交互之一：客户列表里新增一条跟进记录、移除一条过期数据，看板列里拖入一张卡片。默认情况下，DOM 节点被直接插入或删除，没有任何过渡——元素瞬间出现或消失，用户的视线找不到锚点，界面看起来“跳”了一下。

手动给每个列表项写 CSS transition 很快会变得脆弱：增删节点的时机分散在不同代码路径里，过渡效果容易遗漏或互相打架。

工作原理

这个技能的做法很直接：把过渡能力收敛到一个父元素上，让库自己管理子项进出的动画。

• 在直接包裹列表项的父容器上挂载 autoAnimate（指令或函数形式）；
• 当某个子项被插入或移除时，@formkit/auto-animate 会比较前后两次渲染的 DOM 差异，自动对新增或移除的节点做过渡，不需要在业务代码里逐项声明动画；
• Vue 场景下，列表项需要有稳定的 key，否则库无法正确匹配前后节点，动画会错位或闪烁。

实现要点的注释会标注 小四原创，方便后续维护者追溯来源。

适用场景：

• 客户 / 跟进列表中新增、删除一行；
• 看板某一列内卡片的进出；
• Demo 演示时让列表交互更顺滑。

适用边界

• 库自行管理动画生命周期，卸载时无需复杂的 teardown 逻辑，但不要把它当成万能胶水。
• 避免挂载到 table / tbody 这类怪异结构上，一旦布局错乱，排查成本很高。
• 上千行的虚拟列表是反模式：每次插入都要扫描差异，性能得不偿失；这类场景应该交给虚拟列表自身的复用机制，而不是增删动画。
• 不做 Timeline、Scroll 等复杂编排，它只解决“增删一项有过渡”这一件事。