agent-Specialization/.astrion/memory/slash_menu_highlight_animation.md

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

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

最终方案

• 提取 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 两层背景叠加。