24 lines
1.6 KiB
Markdown
24 lines
1.6 KiB
Markdown
---
|
||
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 两层背景叠加。
|