{ "curated": true, "slug": "pagetransition", "mode": "single", "examples": [ { "id": "pagetransition-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
\n

PageTransition 页面切换动画

\n

路由切换动画:淡入 / 滑动 / 缩放,时长约 0.35s。点击按钮预览动画。

\n
\n
\n
\n \n \n \n
\n
当前页面内容
\n
\n
\n
", "preview": { "show": [ [ 0 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "

PageTransition 页面切换动画

\n

路由切换动画:淡入 / 滑动 / 缩放,时长约 0.35s。点击按钮预览动画。

\n
\n
\n \n \n \n
\n
当前页面内容
\n
", "jsx": "import { KolePageTransition } from 'kole-ui/react';\n\n{/* 组件内部自带「淡入/滑动/缩放」按钮与动画状态,调用方只需给 text */}\n", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KolePageTransition } from 'kole-ui/react';\n\nexport default function KolePageTransitionDemo(): JSX.Element {\n {/* 组件内部自带「淡入/滑动/缩放」按钮与动画状态,调用方只需给 text */}\n return (\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "唯一对外 prop 是 text(PageTransition.jsx:4 / PageTransition.vue3.vue:9 / PageTransition.vue2.vue:8 一致);三端实现内部已渲染 kole-pt-bar 的「淡入/滑动/缩放」按钮,动画由内部状态 animClass 驱动,调用方不传也不该传。", "原片段的 effect=\"fade\" / direction=\"forward\" 出自契约 dims,是实现不接收的属性(dims 是设计词汇层,不是 prop 源),已移除;原片段手写的 kole-pt-bar 工具栏属重复渲染,也已移除。", "演示页 frameworks/PageTransition.html:18-20 的 data-t 与 :30-35 的点击切换是演示脚本的内部实现,不是调用参数。" ] } ] }