Кратко

  • Первый публичный проект W3C от октября 2022 года описал переход между двумя состояниями одного документа: браузер снимает старый вид, сайт обновляет содержание, затем браузер снимает новый вид и анимирует их смену.
  • Тексты Level 1 за 2023 и 2024 годы уточнили порядок действий и именованные элементы. Проект Level 2 в 2024 году распространил визуальную передачу на переходы между документами.

У новостной карточки есть маленькое фото. По нажатию она превращается в большой материал с тем же фото над заголовком. Глаз хочет проследить путь изображения. У документа другая логика: старая карточка уступила место новой статье. Чтобы движение выглядело непрерывным, сайты часто удерживали две версии интерфейса одновременно и сооружали временные элементы, нужные только для анимации. Декорации начинали командовать реальным содержанием, а после представления их приходилось поспешно разбирать.

Первый публичный проект W3C от 25 октября 2022 года передал часть работы браузеру. Сайт вызывает startViewTransition() и передаёт функцию обновления документа. Браузер сохраняет старый внешний вид, затем функция меняет настоящий документ, после чего браузер сохраняет новый вид. Анимация происходит в отдельном визуальном слое. На сцене уже стоит новая статья; уходящая карточка — снимок прежней сцены, задержавшийся для последнего поклона.

Это разделение защищает структуру страницы от трюка с двойниками. Два одновременно живых интерфейса способны путать порядок чтения и цели действий. Временная картинка позволяет документу сразу прийти к новому состоянию. Браузер держит фотографию. Редакция отвечает за статью, ссылки, заголовки и смысл нового экрана. Даже самый внимательный фотограф не сможет исправить публикацию, которая привела читателя не туда.

Candidate Recommendation от 5 сентября 2023 года перечислила этапы почти как режиссёрский план: захват старого вида, пауза отрисовки, запуск функции обновления, захват нового вида, создание переходных псевдоэлементов, возобновление отрисовки и движение. По умолчанию достаточно общего плавного перехода. Если фото или заголовок должны вести себя отдельно, им дают view-transition-name и оформляют их движение через CSS. Браузер предоставляет общую сцену, а сайт решает, кому выдать сольную роль.

Именование требует дисциплины. Два элемента с одинаковым именем перехода в одном состоянии могут сорвать эффект. Проект Candidate Recommendation от 28 марта 2024 года подробнее описал дерево псевдоэлементов и этапы ViewTransition. Если визуальное представление пропущено, функция обновления всё равно исполняется. Главное действие — доставка нового содержания. Световые эффекты помогают ему, но не должны решать, существует ли сама статья.

История публикаций W3C связывает первый текст 2022 года, этап Candidate Recommendation 2023 года и редакцию 2024-го. Через все версии проходит один обмен: браузер на короткое время хранит виды двух состояний, а сайт меняет свой документ один раз. Авторы выбирают имена, темп и оформление. Зрительный мост строится в слое отображения, без второй постоянной копии интерфейса.

Следующая задача появилась за пределами одного документа. Рабочий проект Level 2 от 13 ноября 2024 года занялся переходом при навигации между документами и участием обеих сторон. Level 1 сопровождал изменение внутри одной страницы. Level 2 должен связать два отдельных документа, когда читатель действительно уходит с одного на другой. Камера всё ещё полезна, но теперь театры стоят по разные стороны улицы.

Для читателя всё решает прибытие. Выбранное фото должно привести к ожидаемому материалу, а движение — объяснить, как маленькая карточка стала полной историей. Великолепный перелёт к неверному тексту остаётся ошибкой, только с более дорогим светом. Браузер умеет красиво проводить старую страницу; новую редакция должна подготовить сама.