Переходы страниц · view-transitions

View Transitions API

Нативные переходы страниц и DOM — без тяжёлой библиотеки

Tier 1Легко с AIОк на мобилеfree (platform)Браузерный API + CSS; Next/React обёртки

Design DNA

«Переход выглядит «родным» для ОС: один документ плавно становится другим.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Реализуй переходы через View Transitions API (нативно).
CSS view-transition-name точечно. Fallback: мгновенная смена без ошибки.
reduced-motion → без анимации. В Next — официальный/простой паттерн, без Barba если не нужен.

Что умеет

·document.startViewTransition
·shared element-подобные имена
·MPA/SPA

Чего не умеет

·Не везде 100% поддержка — нужен fallback
·Не полный контроль как у Barba+GSAP

Когда брать

·Современный Chrome/Edge/Safari
·Лёгкие page/UI transitions

Когда не брать

·Нужна сложная режиссура leave → Barba+GSAP

С чем сочетается

MotionNext.jsBarba (редко вместе)

Альтернативы

Barba.jsMotion AnimatePresenceCSS only

Типичные ошибки

·Без fallback на старых браузерах
·Анимировать огромные деревья

Демо и ссылки

MDN View Transitions