22 lines
2.6 KiB
Markdown
22 lines
2.6 KiB
Markdown
# 档案文字滚动与刻度过渡
|
|
|
|
用户要求标题快切采用类似已有数字滚动的效果。主界面复用 `@kitlangton/rolling-number` 0.4.1 的 `createRollingText`，移除旧 `ScrubTitle` 和黑条样式。
|
|
|
|
- 标题与编号共用 460ms 运动配置。标题采用 `transition: direct`、`stagger: none`，各字同时启动，宽度跟随同一引擎的布局弹簧。
|
|
- 文字固定向上滚动；数字保留按导航方向滚动。中文不经过字母表或随机中间字符。
|
|
- 标题使用 0.2 的垂直模糊强度，停止后恢复清晰。字号、颜色和布局位置沿用原样。
|
|
- 快速替换延续当前可见过渡并转向最新标题。进入详情或启动、开启减少动态效果时结束滚动，保留最新语义文字。
|
|
- 进入阵列时提前同步 animated 状态，修复首次切换因同时开启动画而直接换字的问题。
|
|
|
|
2026-09-09 验证：`npm run build` 通过；`reference/micro-transition-review.html` 的 15 项检查通过，覆盖首次切换、快速连续替换、最终文字与旧字槽回收、长短中文及符号混排、减少动态效果、进入详情打断，以及原有查看器进出与焦点行为。库会暂停隐藏页面的动画，动态检查应在可见页面运行。
|
|
|
|
## 分类、列名和悬停标签
|
|
|
|
用户要求统一检查快速选档时变化的文字。顶部 `INTERNAL DATABASE /` 后的分类、底部列名、悬停标题与权限标签都接入相同的 460ms 文字滚动，共用动效偏好与退出清理。权限内容当前相同，因此没有重复动画；档案数据日后变化时自动过渡。悬停的 `X-` 与斜杠固定，首次出现直接显示，连续命中不同档案才滚动。离开阵列时结束隐藏动画，下次显示当前文字。
|
|
|
|
将列导航字号及 eyebrow 外边距选择器限制在直接子元素，避免影响滚动引擎新增的内部字槽。保留原字号、色彩与分隔间距。
|
|
|
|
跨列刻度原来依赖隐藏和显示每份档案各自的按钮，导致新列没有可插值的旧样式。现在固定复用八个位置，切列仅更新对应档案、可访问标签和选中状态，沿用 400ms 的高度、位置和颜色过渡；各列相同位置无需额外播放。
|
|
|
|
本次构建通过；`reference/navigation-transition-check.html` 的 19 项真实场景检查通过，覆盖分类与列名同时滚动、嵌套样式、固定节点、跨列中间高度、快速反向、各列记忆、刻度点击映射、循环切列、实际射线悬停、首次显示、快速收敛、进入详情打断与减少动态效果。减少动态效果下的极短 CSS 过渡在下一帧清理，验证留出 40ms 提交时间。
|