Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня. Переходы и анимации CSS революционизировали веб-эффекты за последнее десятилетие, но не все так просто. Представьте список элементов, например, 10 изображений с заголовками, который мы хотим преобразовать в новый список элементов через плавное затухание (cross-fade). Классический подход заключается в следующем: До недавнего времени у нас не было возможности простого обновления DOM. При использовании View Transitions API происходит следующее: Таким образом, наш код отвечает только за обновление DOM. 
 Данный интерфейс является экспериментальным и пока поддерживается только браузерами на основе Chromium и в SPA (одностраничные приложения). ViewTransition API for navigations (для навигаций, переходов) также доступен в Chrome 115+ и позволяет анимировать загрузки отдельных страниц, из которых, например, состоит типичный сайт WordPress. Это даже не требует наличия JavaScript. О намерениях Mozilla и Apple по реализации рассматриваемого интерфейса в Firefox и Safari ничего не известно. Однако браузер, который не поддерживает переходы отображения, просто пропустит их (переход будет мгновенным). Разработчики определенного возраста могут испытать дежавю. Microsoft добавила переходы элементов и целых страниц в IE 4.0 (релиз которого состоялся в 1997 году) с дальнейшими обновлениями в IE 5.5 (в 2000). Мы могли добавлять вдохновленные PowerPoint эффекты с помощью тега meta: Данная техника не получила широкого распространения. Не очень понятно, почему появление альтернативы заняло четверть века. Откройте следующий пример в Chrome и кликните по ссылке в шапке, чтобы увидеть одно-секундный анимированный переход между двумя состояниями. HTML содержит 2 элемента article с идентификаторами article1 и article2 для блоков с содержимым: Функция switchArticle обрабатывает все обновления DOM. Отображение статьи контролируется атрибутом hidden. При загрузке страницы активная статья определяется по location.hash (хеш-части URL — все, что после символа #). При отсутствии хеша, активной становится первая статья. Регистрируем обрабочик кликов, вызывающий switchArticle() при клике по ссылке #hash: Обновляем обработчик, передавая switchArticle() в качестве коллбэка document.startViewTransition() с проверкой доступности последнего: document.startViewTransition() делает снимок начального состояния, запускает switchArticle(), делает снимок нового состояния и создает дефолтный полусекундный переход между состояниями. Для стилизации старого и нового состояния предназначены следующие селекторы CSS: В приведенном выше примере мы увеличиваем продолжительность анимации до 1 секунды, чтобы сделать ее более заметной: ::view-transition-group(root) позволяет применять эффекты сразу к обоим состояниям, хотя вряд ли мы будем применять одинаковую анимацию в большинстве случаев. Коллбэк, передаваемый document.startViewTransition(), может возвращать промис, что делает возможными асинхронные обновления DOM. Например: Это замораживает (freeze) страницу до разрешения промиса, что может негативно повлиять на пользовательский опыт. Более эффективным подходом является вызов большей части кода за пределами метода startViewTransition: Пример более сложного перехода: В CSS определяются анимации transition-out и transition-in с затуханием и вращением (прим. пер.: обратите внимание на использование еще одной новой фичи — индивидуальных свойств трансформации): Анимации применяются ко всей странице, включая элемент header, что выглядит немного странно. Свойство view-transition-name позволяет применять (или отключать) анимации к отдельным элементам: Теперь шапка может анимироваться отдельно: Мы не хотим анимировать шапку, поэтому у нас нет необходимости определять для нее анимации. Селекторы ::view-transition-old(root) и ::view-transition-new(root) теперь применяются ко всем элементам, за исключением <header>: Эффекты определяются с помощью CSS, что позволяет использовать инструменты разработчика, такие как панель "Анимация" (animation) для более детального анализа и отладки анимаций. Несмотря на то, что для большинства эффектов достаточно CSS, Web Animations API предоставляет более гранулированный контроль над таймингом и эффектами анимации с помощью JavaScript. document.startViewTransition() возвращает объект, запускающий промис ready, который разрешается, когда становятся доступными псевдоэлементы перехода (обратите внимание на свойство pseudoElement второго параметра animate()): ViewTransition API for navigations на данный момент доступен только в Chrome 115 под специальным флагом. Для применения возможностей, предоставляемых этим интерфейсом, достаточно добавить в раздел head страницы такой тег: Для стилизации состояний также используются селекторы CSS ::view-transition-old и ::view-transition-new, а для глубокой кастомизации анимации можно применять Web Animations API. Для некоторых людей с особенностями восприятия анимированные переходы могут оказаться нежелательными. Соответствующее предпочтение пользователя можно определить с помощью медиа-запроса prefers-reduced-motion: View Transitions API упрощает анимирование переходов состояний элементов на странице и самих страниц. Раньше такие переходы требовали наличия JavaScript и очень осторожного обращения с навигацией браузера, такой как обработка нажатия кнопки "Назад". Данный интерфейс является новым. Сложно сказать, останется ли он неизменным, станет ли стандартом и если станет, то когда, когда будет реализован в Firefox и Safari. Однако в качестве прогрессивного улучшения мы можем применять его уже сегодня. Ссылки для дальнейшего изучения: JavaScript Developer