‹ 首页

vercel-react-view-transitions

@vercel-labs · 收录于 1 周前 · 上游提交 1 个月前

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

适合你,如果要在 React 或 Next.js 中实现流畅的页面过渡动画。

/ 通过 npx 安装 校验哈希
npx oh-my-skill add vercel-labs/agent-skills/vercel-react-view-transitions
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- vercel-labs/agent-skills/vercel-react-view-transitions
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify vercel-labs/agent-skills/vercel-react-view-transitions
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
28888GitHub stars
~2.6K最小装载
~14.9K含声明引用
~15.4K文本包总量
索引托管

怎么用

商店整理自技能原文 · 版本 f8a72b9 · 表述以原文为准
它做什么

安装后,Claude 会指导你使用 React 的 View Transition API 在页面切换、列表重排、组件进出场等场景添加动画。它会教你用 `<ViewTransition>` 组件声明动画目标,用 `startTransition` 等触发动画,并用 CSS 控制动画效果。

什么时候触发

当你提到“页面过渡”、“视图过渡”、“startViewTransition”、“ViewTransition”等关键词,或要求实现页面切换动画、共享元素动画、列表重排动画、组件进出场动画、Next.js 视图过渡时触发。

装好后可以这样说
Claude 会指导你使用方向性过渡类型。
Claude 会说明 App Router 的配置和用法。

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。