page-transition · 过场三档
同一件事的三档做法:① 原生 View Transitions API(零 JS,跨文档翻页 + 页内进出场)、 ② 主包体过场(DOM 整块上推/散射,不依赖浏览器支持)、③ 文字粒子(Three 粒子字,最重但最像「星池」)。
预览必须经 http 服务打开(ES module 与跨文档视图过渡都不在直接双击打开的页面上生效)。
vt-layer跨文档视图过渡 + 背景层跨页连续 + 卡片进出场 + 弹层开合。零 JS,只 link 一份 CSS。首选 · 支持度视浏览器 · preview/vt-a.html ⇄ vt-b.html
section-travel整屏 DOM 整块位移(下切底进 / 上切顶进),再叠字粒、阶梯、解模糊等细节。兜底档 · 纯 CSS/DOM · 6 个变体
text-threeThree 粒子字:字形采样成粒子,从屏外飞入 / 炸散重组 / 流线汇入。重档 · 包内 vendor three r170 · 5 个形态
| 档 | 实现 | 参数 | 代价 |
|---|---|---|---|
| vt-layer | src/vt-layer.css + src/bg-boot.js + src/starfield-bg.js | 淡出/淡入时长、上浮距离 | 0 KB JS(背景层另算) |
| section-travel | src/section-travel.js + src/section-travel.css | 时长、位移、变体 | 1 份 CSS + 1 份 JS |
| text-three | src/text-three.js + upstream/three.module.js | 粒子密度、辉光 | three 运行时的体积与首帧成本 |
选型与接线见 docs/usage.md。