Каталог / vercel-labs / vercel-react-view-transitions
vercel-react-view-transitions
vercel-labs/agent-skills
877
установок
#322
в рейтинге
Что делает
Нативные браузерные анимации для React UI-переходов через View Transition API.
- Объявляй анимации с <ViewTransition> компонентом; триггери через startTransition, useDeferredValue или Suspense; управляй стилями через CSS-классы и pseudo-элементы
- Поддерживает пять паттернов анимации по приоритету: shared elements (morphing), Suspense reveals, list identity (reorder), изменения состояния (enter/exit), переходы маршрутов
- Уси addTransitionType для контекстных анимаций (напр., направленные слайды для иерархической навигации, fades для боковых табов)
- Работает в Next.js App Router из коробки; требует react@canary для standalone React; gracefully деградирует на неподдерживаемых браузерах (Chromium 111+, Firefox 144+, Safari 18.2+)
- Включает пошаговый workflow реализации, CSS-рецепты анимаций и паттерны для shared elements, list reorder, Suspense reveals и направленной навигации
Установка
$ npx skills add vercel-labs/agent-skills