vercel-react-view-transitions

Vercel React View Transitions — skill о нативных переходах между состояниями интерфейса с React View Transition API. Источник описывает компонент <ViewTransition>, addTransitionType и CSS-псевдоэлементы view transition. Компонент связывает границу React с document.startViewTransition; разработчику не нужно вызывать startViewTransition вручную. Рекомендуемый принцип — добавлять переход только там, где он передаёт пространственную связь или непрерывность: общий элемент означает «тот же объект, но глубже», reveal через Suspense — загрузку данных, identity списка — те же элементы в новом порядке, enter/exit — появление или исчезновение, а route change — переход в новое место. Для реализации источник задаёт порядок приоритетов. В иерархической навигации list-to-detail подходят type-keyed nav-forward и nav-back. Для боковой навигации между вкладками следует использовать обычный fade или default="none", потому что направленный slide создаёт ложное ощущение глубины. Для Suspense reveal применяются enter и exit, а для фонового обновления — default="none". Внутри списка каждому элементу нужен стабильный key и собственная ViewTransition-граница. Обёртки между списком и этой границей могут нарушить ожидаемую анимацию. Триггеры также ограничены. enter срабатывает при вставке во время Transition, exit — при удалении, update — при изменении DOM внутри границы, а share — когда именованная граница исчезает и другая с тем же name появляется в том же переходе. startTransition, useDeferredValue или Suspense активируют View Transitions; обычный setState сам по себе не анимирует. Свойства default, enter, exit и share принимают auto, none, имя CSS-класса или карту по типу. При default="none" нужные виды анимации нужно включить явно, иначе можно незаметно отключить share или update. Для shared element две границы получают одно name, например hero-image. В каждый момент может быть смонтирована только одна граница с данным именем, поэтому для повторяемых компонентов нужны уникальные имена вроде item-image-${id}. Если matching pair не образовалась, вместо share сработают enter/exit; при default="none" без явного share morph не произойдёт. Типизированная карта share требует, чтобы навигация действительно добавляла соответствующий transition type. router.back() и browser back/forward типов не передают, поэтому направленные типовые анимации для них разрешаются через default. Для Next.js источник указывает, что App Router уже содержит необходимую React canary-возможность и устанавливать react@canary не нужно; интеграционные детали находятся в связанных references/nextjs.md. Поддержка браузеров в документе указана для Chromium 125+, Firefox 144+ и Safari 18.2+, при этом неподдерживаемые браузеры должны пропускать анимации без поломки интерфейса. Важное ограничение — экспериментальная API требует аккуратного размещения границ, CSS-рецептов и reduced-motion правила. Перед добавлением переходов нужно проверить структуру DOM, наличие transition types и доступность анимации для пользователей с reduced motion, а не считать ViewTransition универсальной заменой обычному CSS.