从单表滚动到双表排名：用 CSS 定位实现跨表动画延续

在实时排名场景里，一个常见需求是：分数变动时行要高亮，排名变化时行要平滑移动。单表还好办；一旦拆成「第 1–10 名」和「第 11–20 名」两张表，第 10 名和第 11 名之间的跃迁就成了难点——动画不能在两表之间断掉。

本文基于 board.html 的实现，从单表滚动思路讲起，再说明为何用同一份数据渲染两次 + 定位裁剪，以及这和 @formkit/auto-animate 如何配合。

一、问题：单表够用，双表会「断档」

1.1 单表方案（起点）

最直觉的做法：一张表、20 行，按总分降序排列。分数更新后 sort，配合列表动画库（如 auto-animate），行会在 DOM 重排时平滑移动。

单表的核心很简单：

一份 rankingData（20 条）
一个可滚动或固定高度的容器
列表动画绑定在同一个父节点上

1.2 拆成两张表后的问题

产品/UI 常要求左右（或上下）并排：

左：第 1–10 名
右：第 11–20 名

若按「逻辑拆分」做：

两个独立列表、两套 DOM，会出现：

跨边界无动画：第 10 名升到第 9 名，只在左表内动；但从第 10 名掉到第 11 名时，左表一行消失、右表一行出现，没有连续位移。
同一实体两套节点：team_9 在左表卸载、在右表挂载，动画库视为两个元素，无法做「穿过分界线」的过渡。
排名数字与视觉不同步：两表各自 index + 1 时，中间态容易和真实全局排名不一致。

目标：视觉上仍是两张表，动画上仍像一张长列表。

二、核心思路：一份数据，渲染两次，用定位「开窗」

board.html 没有拆成两个数组，而是两个表都 map 完整的 20 条数据，用 CSS 只露出各自该看的窗口。

2.1 固定视口 + 溢出隐藏

外层 .tbody：固定高度，只显示 10 行。
内层 .tbody-scroll：绝对定位，承载全部 20 行。

2.2 两个「窗口」：top 与 bottom

同一套 20 行 DOM：

左表 tbv1：top: 0，视口裁掉下方 10 行 → 显示排名 1–10。
右表 tbv2：bottom: 0，列表底对齐容器底 → 视口裁掉上方 10 行 → 显示排名 11–20。

示意：

2.3 为什么要用定位？

做法	跨 10↔11 名	原因
两个 slice 列表	❌ 断档	不同父节点、不同 key 生命周期
单表 + 滚动	✅ 连续	但只有一张表，不符合双栏 UI
双表 + 同数据 + 定位裁剪	✅ 可延续	每表仍是完整列表的子集视图；排序时 auto-animate 在同一父节点内做 FLIP，行在完整列表里移动，裁剪只决定「从哪扇窗看见」

定位的目的不是排版偷懒，而是为跨表排名动画保留同一条 DOM 动画链路。

当某队从第 10 落到第 11：

数据仍是一份 rankingData 排序结果；
该行在左表列表里向下移出 tbv1 视口；
在右表同一 id 的节点在 tbv2 里从视口上方「进入」可见区；
用户感知为：一行滑过中间边界，而不是左表消失、右表突然出现。

三、React 层：双 ref、同一数据源

要点：

key={row.id}：稳定身份，排序时复用节点，auto-animate 才能算位置插值。
ranking={index + 1}：全局排名，两表数字一致。
两个 useAutoAnimate：左右各一个动画父节点；同一队在两边各有一个 DOM 副本，各自在裁剪窗口内做 reorder 动画，合起来像跨窗连续运动。

四、分数与排名：两阶段更新

仅有列表动画不够，还需要「先提示、再移动」。

4.1 常量

4.2 排名不变：只高亮

分数变了但排序不变：

preMoveTeamId → 行加 pre-move（蓝色呼吸边框）
changedScore → 对应分数列闪烁 + 整行 score-row-changed（淡黄底）
650ms 后清除 pre-move，1.5s 后清除分数高亮

4.3 排名会变：先定格，再排序

applyRankingChange 的核心分支：

时间线：

先高亮再动，避免「分数还没看清就跳位」；对跨表边界尤其重要，用户能先看到是哪一队，再跟动画。

五、样式与交互细节

5.1 行高与视口对齐

行高 64px，容器 640px → 正好 10 行，避免半行露出破坏「分页」感。

5.2 高亮语义

pre-move：即将变排名（含跨表）。
score-row-changed：分数变了、排名未变。
score-changed / heart-changed：具体列数字动画。

5.3 响应式

小屏双表纵向堆叠；定位裁剪逻辑不变。

六、取舍与可扩展

优点

跨 10/11 名边界动画连续，双栏 UI 不牺牲体验。
排名数字全局一致，逻辑简单。
与 React 声明式更新、auto-animate 兼容好。

代价

每表渲染 20 行，DOM 约为「只渲染 10 行」的 2 倍；20 条规模可接受。
两表各一份相同 key 的节点，需接受「同一 id 两个 DOM」；动画靠裁剪窗口配合，而非单一列表。
超过 20 名需调整 tbody 高度与 tbv1/tbv2 策略（或 N 窗格）。

延伸

三栏（1–7 / 8–14 / 15–20）：同一模式，多组 top/bottom 或 transform: translateY 开窗。
虚拟列表：行数很大时，在「连续动画」与「DOM 数量」间要重新设计；当前方案适合榜单 Top 20 级实时大屏。

结语

从单表滚动到双表排名，难点不在 sort，而在边界上的动画是否连续。board.html 的选择是：

不拆数据，只拆视口——两份完整列表、两种定位对齐，用 overflow 裁出两个排名窗口。

这样 @formkit/auto-animate 仍在完整列表的父节点里工作，第 10 名与第 11 名之间的升降，才能像在同一张长表里滑动，而不是两个无关列表的跳变。若你在做赛事大屏、直播榜单或任何「分屏 Top N」场景，这套「定位开窗 + 两阶段更新」值得直接复用或按规模微调。

配套 Demo：demo2/board.html