页面过渡编排器
ReactNext.js动画Page TransitionMotion更新于 2026-08-14
使用场景： 为 Next.js 或 React 应用添加电影感页面过渡——淡入/滑动式路由切换、共享元素形变和导航顶部进度条。
安装
npx skills add page-transition-orchestrator克隆
git clone https://github.com/skillhub-community/page-transition-orchestrator.git描述
面向 App Router 项目的页面过渡框架。核心部件：(1) RouteTransitionProvider 包裹应用并协调导航时的进出场序列——普通路由用淡入+滑动，都渲染同一元素的共享元素形变（如产品卡片放大为详情 hero）；(2) 由导航开始/完成事件驱动的顶部进度条（适配 Next.js useRouter 事件或自定义路由监听）；(3) 视口批量出场，每次路由切换后重复元素依次淡入。
细致处理 App Router 流式渲染模型：过渡会等新页面的数据（经 Suspense 边界）解析后再入场，避免新内容的闪现。提供配置 API（duration、easing、按路由元数据设置方向）和一个演示模板，展示列表→详情形变、嵌套布局与带趣味过渡的 404 页。尊重 prefers-reduced-motion，全部禁用路由过渡。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@motion_kevin
许可证MIT
版本1.0.0
依赖1