---
name: slash_menu_highlight_animation
description: 当修改/菜单选中高亮动画时，应该索引本记忆
---

## / 菜单选中高亮动画 — 设计教训

### 最终方案
- 提取 `skill-slash-menu-wrapper` 外壳层，高亮条（`.skill-slash-menu__highlight`）放在 wrapper 内但**滚动容器外**，用 `position: absolute` 相对于 wrapper 定位
- 用一个 `requestAnimationFrame` 循环**同时驱动 scrollTop 和 slashHighlightTop**，相同 easing（easeOutCubic）、相同时间（180ms），帧帧同步
- 不使用 CSS transition、scroll-behavior: smooth、scroll 事件

### 踩过的坑
1. **高亮条必须在滚动容器外**：放在内部会随内容滚动，钉死在中间的效果无法实现
2. **CSS transition + scroll-behavior: smooth 无法精确同步**：easing 曲线和时间窗口不完全匹配，导致运动快慢不一致
3. **scroll 事件有盲区**：当 scrollTop 不变（边界、所有项可见）时不触发，导致高亮条卡死
4. **底部 5px 偏差**：`maxScroll` 不是 step(43px) 的整数倍，用 `visibleRows` 推算永远无法精确对齐。正确做法：`highlightTop = gap + index * step - targetScroll`，公式本身就保证了精确对齐

### 中间区域"固定"原理
高亮条和列表以相同距离(step)、相同时间(180ms)、相同 easing 反向运动，视觉上高亮条钉在屏幕中间不动，只有列表在滚。到达滚动极限时，高亮条才开始实际移动。

### 已选中项 hover 不叠加
`.skill-slash-item--active:hover` 设为 `background: transparent`，避免高亮条 + hover 两层背景叠加。