wehub-skill-sync
43 lines
2.0 KiB
Markdown
43 lines
2.0 KiB
Markdown
# React View Transitions Skill
|
|
|
|
用于实现流畅、原生感动画的 Agent 技能，基于 React 的 View Transition API。
|
|
|
|
## 本技能涵盖的内容
|
|
|
|
- **`<ViewTransition>` 组件** — 动画触发器（enter、exit、update、share）、放置规则、View Transition 类
|
|
- **`addTransitionType`** — 为方向性或上下文特定的动画标记过渡
|
|
- **共享元素过渡** — 在不同视图之间变形元素
|
|
- **View Transition 事件** — 通过 Web Animations API 执行命令式 JavaScript 动画
|
|
- **CSS 伪元素** — `::view-transition-old`、`::view-transition-new`、`::view-transition-group`
|
|
- **Next.js 集成** — `experimental.viewTransition`、`next/link` 上的 `transitionTypes` 属性、App Router 模式
|
|
- **无障碍** — `prefers-reduced-motion` 处理
|
|
- **可直接使用的 CSS 配方** — 淡入淡出、滑动、缩放、方向导航
|
|
|
|
## 技能结构
|
|
|
|
```
|
|
react-view-transitions/
|
|
├── SKILL.md # 核心技能（始终加载）
|
|
├── AGENTS.md # 完整编译文档（所有引用已展开）
|
|
└── references/
|
|
├── implementation.md # 逐步实现工作流
|
|
├── patterns.md # 实际模式、事件 API、故障排除
|
|
├── nextjs.md # Next.js 特有模式
|
|
└── css-recipes.md # 可直接复制的 CSS 动画
|
|
```
|
|
|
|
## 安装
|
|
|
|
通过 [skills.sh](https://skills.sh) 安装：
|
|
|
|
```bash
|
|
npx skills install https://github.com/vercel-labs/react-view-transitions-skill
|
|
```
|
|
|
|
## 资源
|
|
|
|
- [React `<ViewTransition>` 文档](https://react.dev/reference/react/ViewTransition)
|
|
- [React `addTransitionType` 文档](https://react.dev/reference/react/addTransitionType)
|
|
- [Next.js `viewTransition` 配置](https://nextjs.org/docs/app/api-reference/config/next-config-js/viewTransition)
|
|
- [Next.js App Router Playground（视图过渡）](https://github.com/vercel/next-app-router-playground/tree/main/app/view-transitions) — Vercel 的参考实现
|