View Transitions: что именно анимируется между состояниями страницы
Старый снимок, новый DOM, именованные группы, асинхронные стадии и отдельные условия переходов между документами.
Переход отделён от изменения содержимого
View Transition API добавляет визуальный переход между состояниями интерфейса. В одностраничном приложении состояние меняется внутри текущего документа, а в многостраничном — при переходе на другой документ. Эти сценарии похожи внешне, но запускаются по-разному и имеют разные условия доступности.
Главная идея состоит не в длительном хранении двух полноценных копий страницы в разметке. Браузер подготавливает визуальные представления старого и нового состояния, а оформление перехода работает с отдельной системой псевдоэлементов. Это снимает часть задач по временному позиционированию старых узлов поверх новых. При этом API не является маршрутизатором, источником данных или механизмом авторизации. Загрузка записи, изменение адреса, состояние формы и обработка ошибок по-прежнему принадлежат приложению. Анимация описывает, как пользователь увидит уже организованную смену состояния, а не определяет, какая операция должна считаться успешной.
Callback выполняет реальную работу
Для перехода внутри документа используется document.startViewTransition(). В функцию передаётся callback, изменяющий DOM. Он вызывается после подготовки старого визуального состояния. Callback может вернуть Promise; новый этап начинается после его успешного завершения. Если Promise отклонён, визуальный переход прекращается.
Это даёт точную границу между эффектом и изменением данных. Сама функция должна действительно привести документ в новое состояние: заменить содержимое, применить результат выбора либо обновить интерфейс иным способом. Метод возвращает объект ViewTransition, а не обещание готовности всех ресурсов приложения. Если API отсутствует, тот же переход состояния может выполняться непосредственно, без анимации. Такой резервный путь не требует имитировать эффект вручную. В обоих случаях пользовательская операция остаётся одной и той же; различается только способ её показа. Время ожидания сетевого запроса не исчезает из-за того, что обновление помещено внутрь callback.
Снимки и отдельный слой
Модель спецификации использует статическое представление старого состояния и живое представление нового. Старые элементы не продолжают существовать в интерфейсе как ещё одна независимо действующая форма. Для визуального перехода браузер создаёт дерево, включающее ::view-transition, группы, пары изображений и представления old/new.
Схемы CSSWG показывают границы snapshot containing block. Это не тождественно всему экрану устройства: системные панели не становятся содержимым страницы. На мобильном устройстве геометрия учитывает области, в которых браузер потенциально показывает веб-контент; на настольном — область содержимого и полосы прокрутки, но не постоянно отделённую адресную строку. Схема описывает модель расчёта, а не обещание сохранить в картинке любую часть пользовательского интерфейса браузера. На размер и обработку снимков также влияют ограничения реализации. Такие представления создаются для текущего перехода и уничтожаются после его завершения, а не становятся архивом состояний сайта.
Имена связывают соответствующие элементы
По умолчанию переход охватывает корневое представление. view-transition-name выделяет отдельную часть, например изображение карточки, которое в новом состоянии становится большим изображением страницы товара. Совпадающее имя позволяет браузеру связать старое и новое представления и создать для них самостоятельную группу.
Пользовательское имя должно быть уникальным среди одновременно отображаемых элементов соответствующего состояния. Если одинаковое имя назначено двум таким элементам, возникает неоднозначность: браузер не может понять, какую пару следует сопоставить. В этом случае ready отклоняется и переход пропускается. Значение none исключает отдельный снимок, но элемент всё ещё может попасть в снимок именованного предка. match-element поручает браузеру внутреннее уникальное именование; такое имя не читается из DOM. Это другой механизм, чем явно согласованное имя между двумя документами. Свойство обозначает визуальное соответствие, а не задаёт идентификатор HTML или ключ записи в базе.
Три Promise описывают разные стадии
ViewTransition предоставляет updateCallbackDone, ready и finished. Первое отражает завершение изменения документа, второе — готовность дерева перехода к запуску анимации, третье — окончание перехода и появление нового доступного состояния. Подмена одного другим приводит к ошибочной последовательности действий: обновлённый DOM ещё не означает завершённого визуального эффекта.
Метод skipTransition() пропускает анимационную часть, но не отменяет callback изменения DOM. Это существенно для пользовательского действия: отключение эффекта не должно неожиданно возвращать старую запись или повторять запрос. Обработка отклонения ready также отличается от обработки неудачи самого обновления. Например, невозможность построить визуальные пары не доказывает, что новая разметка не появилась. API разделяет эти результаты намеренно. Оно не принимает на себя очередь всех асинхронных изменений приложения: конкурирующие обновления и их допустимость остаются частью логики интерфейса, которая располагает информацией о действиях пользователя и состоянии данных.
| Стадия | Что завершено | Чего она не гарантирует |
|---|---|---|
| updateCallbackDone | Callback обновления DOM | Окончания анимации |
| ready | Подготовка псевдоэлементов перехода | Успешного завершения самого эффекта |
| finished | Переход; новый вид доступен | Загрузки любых несвязанных данных приложения |
Источник: MDN: ViewTransition properties
Переходы между страницами требуют согласия обеих
Для перехода между документами обе страницы включают @view-transition с navigation: auto. Они должны принадлежать одному origin; переход через иной origin не становится допустимым только потому, что конечный адрес снова выглядит знакомым. Документация отдельно исключает cross-origin redirects из этого сценария.
Настройка участвует в подходящих типах навигации: traverse, push и replace. Для push и replace требуется действие пользователя внутри содержимого страницы, а не произвольное действие интерфейса браузера. Поэтому обычное открытие адреса и переход по внутренней ссылке не следует считать полностью одинаковыми случаями. CSS-правило не переносит приложение в SPA и не отменяет загрузку нового документа сервером. Его задача — согласовать визуальную часть навигации. Поддержка междокументного варианта также не выводится автоматически из наличия startViewTransition: документация MDN помечает эти возможности отдельно, и одинаковое семейство названий не гарантирует одинакового охвата браузеров.
Анимация и предпочтение уменьшенного движения
Оформление направляется на псевдоэлементы перехода, а не только на исходный DOM. Например, old и new могут получать разные ключевые кадры. У группы также есть собственные анимируемые размеры и положение; изменение длительности только одного дочернего представления способно рассогласовать части эффекта. Обычный cross-fade — лишь исходное оформление, а не единственная допустимая композиция.
Отдельно существует prefers-reduced-motion. Значение reduce передаёт системное предпочтение пользователя уменьшить необязательное движение. Оно не означает «анимация всегда технически невозможна»: CSS может заменить перемещение более спокойным изменением либо убрать эффект. no-preference означает отсутствие сообщённого предпочтения, а не явное согласие на любой масштаб движения. Настройка особенно относится к крупным перемещениям и масштабированию, способным вызывать дискомфорт. Само наличие View Transition API не освобождает оформление от этого сигнала: механизм смены состояния и выбранная интенсивность визуального движения остаются разными уровнями реализации.
