80 lines
4.4 KiB
JSON
80 lines
4.4 KiB
JSON
{
|
||
"slug": "pagetransition",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 pagetransition：三种进场动画类 .kole-pt-fade / -slide / -zoom，配 .kole-pt-stage 舞台。",
|
||
"usage": [
|
||
"根容器 .kole-pt 只统一字体，动画类挂到内容元素上（frameworks/PageTransition.css:2）。",
|
||
"操作条 .kole-pt-bar 是 8px 间距的横向 flex 加下外边距，内部按钮复用 .kole-btn 并降到 13px（frameworks/PageTransition.css:3-4）。",
|
||
"舞台 .kole-pt-stage 是 96px 最小高度的居中容器，带边框、8px 圆角与卡片底，是动画播放区（frameworks/PageTransition.css:5）。",
|
||
"三种动画各一个类：.kole-pt-fade 淡入、.kole-pt-slide 从下方 16px 上滑、.kole-pt-zoom 从 0.92 倍放大，时长统一 0.35s ease（frameworks/PageTransition.css:6-8）。",
|
||
"关键帧分别是 koleFade / koleSlide / koleZoom，都只定义 from/to 两帧（frameworks/PageTransition.css:9-11）。"
|
||
],
|
||
"bestPractices": [
|
||
"动画类是单次播放的（无 infinite、无 alternate），重播需要移除再添加类或用 animation 重排技巧，样式层不提供重播类（frameworks/PageTransition.css:6-8）。",
|
||
"三个类的时长与缓动完全一致，差异只在关键帧的位移或缩放；要调速度请改 animation 里的 .35s，三个类要一起改（frameworks/PageTransition.css:6-8）。",
|
||
"动画作用在带类的元素本身，缩放与位移会以该元素为基准；如果希望舞台不跟着动，要把类加在舞台内的子元素上（frameworks/PageTransition.css:5-8）。"
|
||
],
|
||
"a11y": [
|
||
"三个动画都会产生位移或缩放，前庭敏感用户建议在 prefers-reduced-motion 下停用；本文件没有该媒体查询（frameworks/PageTransition.css:6-8）。",
|
||
"淡入动画从透明度 0 开始，若动画被禁用会直接显示静止内容，不会造成内容不可见（frameworks/PageTransition.css:9）。",
|
||
"舞台文字用第三级色加 15px，是演示区的定位；承载正文时建议改用量对比更强的令牌（frameworks/PageTransition.css:5）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-pt（根）、.kole-pt-bar（操作条）、.kole-pt-stage（动画舞台），动画由 .kole-pt-fade / .kole-pt-slide / .kole-pt-zoom 三个类选择；没有状态类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-pt",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PageTransition.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pt-bar",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PageTransition.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-btn",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PageTransition.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pt-stage",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PageTransition.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pt-fade",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PageTransition.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pt-slide",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PageTransition.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pt-zoom",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PageTransition.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PageTransition.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"pagetransition-ex-1"
|
||
],
|
||
"notes": [
|
||
"根与操作条见 frameworks/PageTransition.css:2-4，舞台见 frameworks/PageTransition.css:5，三个动画类见 frameworks/PageTransition.css:6-8，关键帧见 frameworks/PageTransition.css:9-11。",
|
||
"该文件引用了 .kole-btn（来自 Button 组件），是跨组件复用类名的少数情况（frameworks/PageTransition.css:4）。",
|
||
"示例写了 bar 与 stage 结构（site/examples/pagetransition.json），动画类由脚本按用户选择切换。"
|
||
]
|
||
}
|