2.6 KiB
档案文字滚动与刻度过渡
用户要求标题快切采用类似已有数字滚动的效果。主界面复用 @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 提交时间。