Что такое scoped view transitions (ограниченные переходы)?

Scoped view transitions, анонсированные на Google I/O 2026, позволяют ограничить переход конкретным поддеревом DOM вместо всего документа. Это критически важно для Canvas-приложений (см. мое руководство по HTML-in-Canvas) и SPA, где меняется только часть страницы. Используйте document.startViewTransition({ update: callback, scope: element }).

CSS View Transitions API: руководство 2026

Q: Как использовать startViewTransition в JavaScript?

Вызовите document.startViewTransition(callback), где callback изменяет DOM. API захватывает текущее состояние страницы, выполняет callback, захватывает новое состояние и анимирует между ними. Пример: await document.startViewTransition(() => { updateUI(); }).finished;

Q: Как настроить анимации view transitions?

Используйте CSS псевдоэлементы ::view-transition-old (исходящий снимок) и ::view-transition-new (входящий снимок) вместе с @keyframes анимациями. Вы можете переопределить animation-duration, animation-timing-function и animation-name. Используйте view-transition-name для анимации общих элементов, которые могут переходить независимо.

Q: Какие браузеры поддерживают View Transitions API в 2026?

На май 2026: Переходы в одном документе (startViewTransition) поддерживаются в Chrome 111+, Edge 111+, Safari 18+ и Firefox 121+. Кросс-документные переходы — в Chrome 126+, Edge 126+, Safari 18+ и Firefox 131+ (частично). Scoped view transitions доступны в Chrome 148+ (developer trial) и были представлены на Google I/O 2026.

Q: Работают ли view transitions без JavaScript?

Да, для кросс-документных переходов. Когда вы добавляете тег или CSS правило @view-transition, переходы при навигации работают без JavaScript. Переходы в одном документе (startViewTransition) требуют JavaScript, так как само обновление DOM нуждается в скриптах. Лучшая практика: используйте кросс-документные переходы как progressive enhancement.

Введение

Долгие годы плавные переходы между страницами были прерогативой JavaScript-библиотек и фреймворков. React Router анимации, Vue transition components, GSAP — всё это временные решения для отсутствующего в браузере примитива. CSS View Transitions API меняет это кардинально.

На май 2026 года View Transitions API готов к продакшену во всех основных браузерах. Переходы в одном документе (для SPA) работают в Chrome, Safari и Firefox. Кросс-документные view transitions — анимация между отдельными HTML-страницами при навигации — теперь доступны в Chromium и Safari, с Firefox на подходе. Scoped view transitions, анонсированные на Google I/O 2026, добавляют ограниченные переходы на уровне элементов для Canvas и SPA.

В этом руководстве я разбираю каждый аспект View Transitions API: базовый startViewTransition(), кросс-документную навигацию через CSS правило @view-transition, кастомные анимации с view-transition-name, новые scoped transitions, таблицы поддержки браузеров и реальные паттерны, которые можно использовать уже сегодня.

Что такое View Transitions API?

View Transitions API — это встроенный браузерный механизм для анимации изменений между двумя состояниями DOM. Он работает в трёх режимах:

В одном документе (SPA): JavaScript вызывает document.startViewTransition(callback) для анимации обновления DOM на одной странице.
Кросс-документный (MPA): Навигация между двумя разными HTML-страницами с CSS правилом @view-transition или <meta> тегом запускает автоматический переход.
Ограниченный (на уровне элемента): Новый в Chrome 148+, переход, ограниченный конкретным поддеревом DOM. Анонсирован на Google I/O 2026.

Под капотом браузер делает снимок текущего состояния, позволяет обновить DOM, затем делает снимок нового состояния и интерполирует между ними с помощью CSS-анимаций. Браузер обрабатывает всю работу на уровне пикселей — никакого requestAnimationFrame, ResizeObserver или ручной интерполяции.

Переходы в одном документе: startViewTransition()

Базовое использование

Простейший пример — замена содержимого в div:

async function switchView() {
  // Захватываем состояние, обновляем DOM, анимируем
  const transition = await document.startViewTransition(async () => {
    // Ваша DOM-мутация
    contentDiv.innerHTML = newContent;
  });

  // Ждём завершения анимации
  await transition.finished;
}

Браузер захватывает состояние до (текущий DOM), выполняет callback (изменяет DOM), захватывает состояние после и запускает анимацию crossfade между двумя снимками.

Жизненный цикл перехода

Каждый view transition проходит через предсказуемый жизненный цикл:

transition.ready — разрешается, когда создано дерево псевдоэлементов и анимации готовы к запуску.
transition.finished — разрешается по завершении анимаций.
transition.updateCallbackDone — разрешается после завершения callback обновления DOM (до начала анимации).
transition.skipTransition() — мгновенно переходит к новому состоянию без анимации. Полезно для доступности — соблюдайте prefers-reduced-motion.

Кросс-документные View Transitions (MPA)

Это функция, которая делает View Transitions API по-настоящему революционным. Кросс-документные view transitions позволяют анимировать навигацию между двумя отдельными HTML-страницами — настоящим multi-page приложением (MPA) — с плавным анимированным переходом.

Включение кросс-документных переходов

Добавьте CSS правило @view-transition на обе страницы (исходящую и входящую):

/* На обеих страницах */
@view-transition {
  navigation: auto;
}

Или используйте <meta> тег в <head>:

<meta name="view-transition" content="same-origin">

После включения все навигации между страницами одного origin будут автоматически анимироваться с crossfade-переходом. Обе страницы должны иметь правило — если только одна из них имеет, переход пропускается.

Анимация общих элементов между страницами

Настоящая магия происходит с общими элементами. Когда элемент существует на обеих страницах (исходящей и входящей) с одинаковым view-transition-name, браузер плавно анимирует его между старым и новым положением:

/* На странице A — изображение товара в карточке */
.product-image-main {
  view-transition-name: product-image;
}

/* На странице B — то же изображение на позиции hero */
.product-detail-image {
  view-transition-name: product-image;
}

При навигации со страницы каталога на страницу товара изображение плавно масштабируется и перемещается из карточки в позицию hero. Остальное содержимое страницы просто перекрестно затухает. Никакого JavaScript не требуется.

Настройка анимаций View Transition

Стандартный crossfade чистый, но универсальный. Вы можете настроить каждый аспект анимации с помощью CSS псевдоэлементов и @keyframes.

Дерево псевдоэлементов

Во время view transition браузер создаёт дерево псевдоэлементов:

::view-transition — корневой оверлей (покрывает всю страницу)
::view-transition-group(name) — группа для каждого именованного элемента
::view-transition-image-pair(name) — содержит старый и новый снимки
::view-transition-old(name) — снимок исходящего состояния
::view-transition-new(name) — снимок входящего состояния

Пример кастомной анимации

Анимация slide-and-fade для всей страницы:

::view-transition-old(root) {
  animation-duration: 400ms;
  animation-name: slide-out;
}

::view-transition-new(root) {
  animation-duration: 400ms;
  animation-name: slide-in;
}

@keyframes slide-out {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-30px); }
}

@keyframes slide-in {
  0%   { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

Доступность: prefers-reduced-motion

Всегда добавляйте fallback для пользователей, предпочитающих уменьшенную анимацию:

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}

Scoped View Transitions (Chrome 148+)

Анонсированные на Google I/O 2026, scoped view transitions позволяют ограничить переход конкретным DOM-элементом вместо всего документа. Это критическое улучшение для:

Single Page Applications — меняется только контентная область, а не шапка/подвал
Canvas-приложений — переходы на DOM-элементах, отрендеренных на Canvas (см. руководство по HTML-in-Canvas)
Виджетов и модальных окон — независимые переходы для каждого компонента

API ограниченных переходов

Передайте опцию scope в startViewTransition():

const contentArea = document.getElementById('main-content');

await document.startViewTransition({
  update: async () => {
    contentArea.innerHTML = newContent;
  },
  scope: contentArea
}).finished;

Поддержка браузеров в 2026

Функция	Chrome	Edge	Safari	Firefox
В одном документе (startViewTransition)	111+	111+	18+	121+
Кросс-документные (meta/@view-transition)	126+	126+	18+	131+ (частично)
Scoped transitions (один документ)	148+	148+	—	—
Scoped transitions (кросс-документ)	150+	150+	—	—
Кастомные анимации (::view-transition-old/new)	111+	111+	18+	121+
view-transition-name на нескольких элементах	111+	111+	18+	121+

Реальные примеры использования

1. SPA навигация с интеграцией фреймворка

Для React, Vue или Svelte оберните роутер в startViewTransition():

// React Router интеграция
import { useNavigate } from 'react-router-dom';

function useViewTransitionNavigate() {
  const navigate = useNavigate();
  return async (to, options) => {
    if (document.startViewTransition) {
      await document.startViewTransition(async () => {
        navigate(to, options);
      }).finished;
    } else {
      navigate(to, options);
    }
  };
}

2. Галерея изображений с общим элементом

Классический сценарий — миниатюра, которая расширяется в полноразмерное изображение. Обе используют одинаковый view-transition-name:

/* Миниатюра в галерее */
.gallery-thumb[data-id="photo-1"] {
  view-transition-name: gallery-photo-1;
}
/* Hero-изображение на странице деталей */
.photo-hero[data-id="photo-1"] {
  view-transition-name: gallery-photo-1;
}

3. Табы / Аккордеоны

Используйте scoped view transitions для контентных панелей табов. Только содержимое панели анимируется, остальная страница статична:

async function switchTab(tabIndex) {
  const panel = document.getElementById(`tab-panel-${tabIndex}`);
  await document.startViewTransition({
    update: async () => {
      panels.forEach(p => p.classList.remove('active'));
      panel.classList.add('active');
    },
    scope: panel.parentElement
  }).finished;
}

Progressive Enhancement

View Transitions API — это progressive enhancement. Ваша страница должна отлично работать и без него:

Нужны плавные переходы? Смотрите мои услуги разработки сайтов

if ('startViewTransition' in document) {
  await document.startViewTransition(async () => {
    updateDOM();
  }).finished;
} else {
  updateDOM();
}

Часто задаваемые вопросы

Что такое CSS View Transitions API?

CSS View Transitions API — это встроенный браузерный API для анимации изменений DOM: добавления, удаления или обновления элементов с плавными переходами. Он работает, захватывая состояния «до» и «после» страницы как снимки и интерполируя между ними с помощью CSS-анимаций. Поддерживает переходы в одном документе (SPA) и кросс-документные переходы (MPA). Для понимания современного CSS вместе с JavaScript смотрите моё руководство по ES2026.

Как использовать startViewTransition в JavaScript?

Вызовите document.startViewTransition(callback), где callback изменяет DOM. API захватывает текущее состояние страницы, выполняет callback, захватывает новое состояние и анимирует между ними. Пример: await document.startViewTransition(() => { updateUI(); }).finished;

Что такое кросс-документные view transitions?

Кросс-документные view transitions позволяют анимировать переходы между отдельными HTML-страницами при навигации. Добавьте <meta name="view-transition" content="same-origin"> на обе страницы, и браузер автоматически анимирует переход. Обе страницы должны быть одного origin. Для сравнения SPA и MPA архитектур смотрите моё руководство по разработке веб-приложений.

Что такое scoped view transitions?

Scoped view transitions, анонсированные на Google I/O 2026, позволяют ограничить переход конкретным поддеревом DOM вместо всего документа. Это важно для Canvas-приложений (см. руководство по HTML-in-Canvas) и SPA. Используйте document.startViewTransition({ update: callback, scope: element }).

Как настроить анимации view transitions?

Используйте CSS псевдоэлементы ::view-transition-old и ::view-transition-new вместе с @keyframes анимациями. Вы можете переопределить animation-duration, animation-timing-function и animation-name. Используйте view-transition-name для анимации общих элементов. Для плавных цветовых переходов между темами используйте CSS Relative Color Syntax — он позволяет создавать динамические цвета на основе CSS-переменных.

Какие браузеры поддерживают View Transitions API в 2026?

На май 2026: Переходы в одном документе — Chrome 111+, Edge 111+, Safari 18+, Firefox 121+. Кросс-документные — Chrome 126+, Edge 126+, Safari 18+, Firefox 131+ (частично). Scoped — Chrome 148+ (developer trial). Подробнее о новых возможностях Chrome в моём обзоре Google I/O 2026 Day 2.

Работают ли view transitions без JavaScript?

Да, для кросс-документных переходов. При добавлении <meta> тега или CSS правила @view-transition переходы при навигации работают без JavaScript. Переходы в одном документе (startViewTransition) требуют JavaScript, так как обновление DOM нуждается в скриптах.

Начните прямо сейчас

Вот простейшая реализация — плавное переключение тёмной темы:

<button id="themeToggle">Сменить тему</button>

<script>
  document.getElementById('themeToggle').addEventListener('click', async () => {
    await document.startViewTransition(async () => {
      document.body.classList.toggle('dark-mode');
    }).finished;
  });
</script>

Для кросс-документных переходов просто добавьте на страницы:

<meta name="view-transition" content="same-origin">

И все навигации между страницами с этим тегом будут анимироваться с плавным crossfade. View Transitions API — одно из самых значительных добавлений в веб-платформу последних лет.

Нужна помощь с внедрением view transitions в вашем проекте? Я занимаюсь frontend-архитектурой и разработкой. Посмотрите мои услуги или свяжитесь со мной. Для более широкого обзора современных CSS-возможностей читайте моё руководство по CSS Container Queries.

CSS View Transitions API:
Полное руководство по анимации переходов между страницами

Введение

Что такое View Transitions API?

Переходы в одном документе: startViewTransition()

Базовое использование

Жизненный цикл перехода

Кросс-документные View Transitions (MPA)

Включение кросс-документных переходов

Анимация общих элементов между страницами

Настройка анимаций View Transition

Дерево псевдоэлементов

Пример кастомной анимации

Доступность: prefers-reduced-motion

Scoped View Transitions (Chrome 148+)

API ограниченных переходов

Поддержка браузеров в 2026

Реальные примеры использования

1. SPA навигация с интеграцией фреймворка

2. Галерея изображений с общим элементом

3. Табы / Аккордеоны

Рекомендации по производительности

Progressive Enhancement

Часто задаваемые вопросы

Начните прямо сейчас

Создаёте современное веб-приложение с плавными переходами?

CSS View Transitions API:Полное руководство по анимации переходов между страницами

Введение

Что такое View Transitions API?

Переходы в одном документе: startViewTransition()

Базовое использование

Жизненный цикл перехода

Кросс-документные View Transitions (MPA)

Включение кросс-документных переходов

Анимация общих элементов между страницами

Настройка анимаций View Transition

Дерево псевдоэлементов

Пример кастомной анимации

Доступность: prefers-reduced-motion

Scoped View Transitions (Chrome 148+)

API ограниченных переходов

Поддержка браузеров в 2026

Реальные примеры использования

1. SPA навигация с интеграцией фреймворка

2. Галерея изображений с общим элементом

3. Табы / Аккордеоны

Рекомендации по производительности

Progressive Enhancement

Часто задаваемые вопросы

Начните прямо сейчас

Создаёте современное веб-приложение с плавными переходами?

CSS View Transitions API:
Полное руководство по анимации переходов между страницами