95 lines
3.9 KiB
JSON
95 lines
3.9 KiB
JSON
{
|
|
"slug": "pagetransition",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生页面过渡：按 data-t 拼过渡类，强制重排后重启 CSS 动画。",
|
|
"usage": [
|
|
"过渡类型写在按钮的 data-t 上（示例为淡入淡出），点击后拼成 stage.className = \"kole-pt-stage kole-pt-\" + t。",
|
|
"重启动画靠强制重排：改完 className 后读一次 void stage.offsetWidth，再 classList.add 同一个类，否则同类型连续点击不会重播。",
|
|
"舞台是 .kole-pt-stage，按钮行是 .kole-pt-bar（内部按钮用通用 .kole-btn）。",
|
|
"内容切换与动画写在同一个 handler 里：先改 stage.textContent 为新页面文案，再切类名。",
|
|
"页面清单是内联数组 pages，索引用 (idx + 1) % pages.length 循环，示例只有三页文案。"
|
|
],
|
|
"bestPractices": [
|
|
"void stage.offsetWidth 是刻意写的强制回流，删掉它会让重复点击同类型过渡时动画不重播。",
|
|
"className 整体赋值会清掉舞台上的其他类，若要保留需改成 classList 操作。",
|
|
"示例只切文本，真实页面要在过渡结束后换 DOM，注意监听 animationend 而不是靠计时器猜时长。"
|
|
],
|
|
"a11y": [
|
|
"页面内容变化没有 aria-live，读屏不会告知已切到页面 B。",
|
|
"过渡动画没有处理 prefers-reduced-motion，前庭敏感用户无法关闭动效。",
|
|
"按钮是原生 button，键盘可达，这点没有额外负担。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端靠类名切换驱动动画：.kole-pt-stage 舞台加 .kole-pt-<类型> 触发过渡，类型由按钮的 data-t 提供，重启靠 void stage.offsetWidth 强制重排，全部写在页内一段脚本里。",
|
|
"table": [
|
|
{
|
|
"name": "kole-btn",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageTransition.html:18）。"
|
|
},
|
|
{
|
|
"name": "kole-demo",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageTransition.html:15）。"
|
|
},
|
|
{
|
|
"name": "kole-desc",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageTransition.html:13）。"
|
|
},
|
|
{
|
|
"name": "kole-h2",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageTransition.html:12）。"
|
|
},
|
|
{
|
|
"name": "kole-page",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageTransition.html:11）。"
|
|
},
|
|
{
|
|
"name": "kole-pt",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageTransition.html:16）。"
|
|
},
|
|
{
|
|
"name": "kole-pt-bar",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageTransition.html:17）。"
|
|
},
|
|
{
|
|
"name": "kole-pt-fade",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageTransition.html:22）。"
|
|
},
|
|
{
|
|
"name": "kole-pt-stage",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageTransition.html:22）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/PageTransition.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/PageTransition.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"pagetransition-ex-1"
|
|
],
|
|
"notes": [
|
|
"舞台与按钮行见（frameworks/PageTransition.html:16-17）与（frameworks/PageTransition.html:22）。",
|
|
"类名拼装与强制重排见（frameworks/PageTransition.html:35-38）。",
|
|
"data-t 读取见（frameworks/PageTransition.html:32），按钮监听注册见（frameworks/PageTransition.html:30）。"
|
|
]
|
|
}
|