64 lines
2.7 KiB
JSON
64 lines
2.7 KiB
JSON
{
|
||
"slug": "pagetransition",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 转场演示，三个按钮切换不同的进入动画类，靠 :key 变更强制重挂载。",
|
||
"usage": [
|
||
"Vue 2 端只有 text 一个 prop，三个动画按钮（淡入、滑动、缩放）是组件内置的。",
|
||
"切换动画的实现是改 animClass 同时把 token 自增，:key 变化让元素的进出动画重放。",
|
||
"动画类名是 kole-pt- 加类型拼接，具体关键帧定义在同名 CSS 文件里。",
|
||
"根节点是 div.kole-pt，按钮复用 kole-btn 样式类。"
|
||
],
|
||
"bestPractices": [
|
||
"这是交互演示组件而非通用转场封装：真实页面转场通常在业务侧用 transition 组件实现。",
|
||
"text 文案会同时用于演示区内容，需要展示真实页面内容时请传结构化程度更高的文本或改造插槽。",
|
||
"token 自增只是为了换 key，值本身没有含义，不要在业务里依赖它。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 1 个 prop、0 事件、0 插槽；动画切换通过 animClass 加自增 key 实现重放。",
|
||
"table": [
|
||
{
|
||
"name": "text",
|
||
"type": "String，默认 '当前页面内容'",
|
||
"desc": "演示区展示的文本"
|
||
},
|
||
{
|
||
"name": "animClass",
|
||
"type": "内部 data，不是 prop",
|
||
"desc": "当前动画类名，默认 kole-pt-fade"
|
||
},
|
||
{
|
||
"name": "token",
|
||
"type": "内部 data，不是 prop",
|
||
"desc": "用于 :key 的自增计数，触发元素重挂载以重放动画"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"三个按钮是原生 button 且带文字，键盘与读屏器都可用。",
|
||
"动画是纯视觉效果，没有做 prefers-reduced-motion 判断，对动效敏感用户缺少降级。",
|
||
"演示区内容变化不会主动播报，且没有 aria-live。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PageTransition.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "PageTransition.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/PageTransition.css",
|
||
"kind": "样式文件",
|
||
"desc": "PageTransition.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"pagetransition-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/PageTransition.vue2.vue:15-17。",
|
||
"data 里的 animClass 与 token 见 frameworks/PageTransition.vue2.vue:18-20，:key=\"token\" 在模板第 8 行。",
|
||
"trigger 方法见 frameworks/PageTransition.vue2.vue:22-25，三个按钮在第 4-6 行。"
|
||
]
|
||
}
|