删掉一行，其余行不该瞬移

列表增删最容易做砸的地方不是动画本身，是动画缺失—— 项目瞬间跳位，用户还没看清删了哪条，下一秒已经找不到刚才在看的内容。

共 0 条

请试这四件事

1. 删中间任意一条。上下两行会平滑滑过去，不是瞬间跳位。盯着两行之间的缝隙看。

2. 点"按记录数排序"。整列重排，每一行各自从旧位置滑到新位置—— 这也是 FLIP，只是位移不为零。

3. 鼠标横着扫过列表。行不会抖。做法是左侧线用 transparent 预留 2px，hover 时只改颜色；如果 hover 才加 border，内容会横移 1–2px，一眼能看出"在抖"。

4. 键盘 Tab 进列表。整行会亮起左边线——但 Tab 不会为每一行多停一次，只在行内按钮上停。这是 :focus-within 的用途。

为什么不用 auto-animate

评估过 auto-animate（8 KB min+gzip，精简档装得下），但列表真正需要的只有"增删时其余项平滑移动"这一件事——为此引入 8 KB 第三方，要承担协议尽调与供应链风险，不划算。

flip.js 用 FLIP（First-Last-Invert-Play）四步做这件事，约 40 行，零依赖。顺带保证了 prefers-reduced-motion 下是完全跳过而不是"缩短"——位置直接到最终态。

涨跌色说明

本库用红涨绿跌，与中国 A 股用户习惯一致。这一点与欧美惯例相反，是刻意的——做反了会被当成数据出错。

对比：错写法 vs 本库写法

❌ 常见写法：长文本直接换行

第一行折成两行，行高就不一样了：一屏能扫到的条目从 8 条掉到 5 条，而且"哪一行对应哪个数字"要重新对。

✅ 本库：单行省略 + `title`

列表是"扫"的不是"读"的：标题单行截断，完整名称放 title，悬停可看。行高一致，眼睛才能顺着往下扫。