虚拟列表与布局动画不能同时接管位置

更新于 2026-07-15

**虚拟滚动用绝对定位 + `transform` 控制卡片位置，布局动画（如 Motion 的 `layout`）也修改 position/`transform` —— 两者同时接管布局就会抖动或位置错位。**

- 普通列表：动画库管进入、退出和补位（initial/animate/exit + AnimatePresence + layout）。

  • 虚拟列表：位置交给虚拟滚动，动画只管透明度、缩放等视觉属性，不碰布局。
  • 引入动画库的代价是新增依赖与客户端包体，还要理解它的布局动画机制；只有多个列表都要统一增删排序动画时才划算，单个列表用 CSS 就够。
  • 虚拟滚动本身解决的是「几千条数据不渲染几千个 DOM」：只创建可视区附近的节点并复用，滚动时不断复用并计算位置。

相关