Что нового в переходах между видами (обновление 2025 г.)

Bramus

Опубликовано: 08 октября 2025 г.

С момента внедрения функции перехода между окнами одного документа в 2023 году многое изменилось.

В 2024 году мы добавили поддержку переходов между представлениями для разных документов , внесли улучшения, такие как view-transition-class и типы переходов между представлениями , а также приветствовали добавление поддержки переходов между представлениями в Safari.

В этом посте представлен обзор изменений в механизмах перехода между окнами в 2025 году.

Улучшенная поддержка браузеров и фреймворков.

Переходы между окнами просмотра одного документа скоро станут доступной функцией в базовой версии.

Одним из приоритетных направлений конференции Interop 2025 является API переходов между представлениями, в частности, переходы между представлениями в пределах одного документа с помощью document.startViewTransition(updateCallback) , view-transition-class , автоматическое именование с помощью view-transition-name: match-element и CSS-селектор :active-view-transition .

Firefox планирует включить эти функции в предстоящий релиз Firefox 144, который станет стабильным 14 октября 2025 года. Это сделает данные функции базовыми и новыми.

Поддержка API View Transition теперь реализована в ядре React.

В течение всего года команда React работала над добавлением анимаций перехода между представлениями в ядро ​​React. В апреле они анонсировали поддержку react@experimental , а на этой неделе на React Conf перенесли её поддержку в react@canary , что означает, что дизайн близок к финальному варианту.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Вы можете ознакомиться с документацией React по <ViewTransition> для получения подробной информации или посмотреть этот доклад Авроры Шарфф, который станет хорошим введением в эту тему.

Недавно выпущенные функции

Автоматическое присвоение имен элементам с помощью view-transition-name: match-element

Чтобы пометить элемент для создания снимка в рамках перехода между представлениями, необходимо задать ему view-transition-name . Это ключевой момент для переходов между представлениями, поскольку он открывает такие возможности, как переход между двумя разными элементами. Каждый элемент имеет одинаковое значение view-transition-name с обеих сторон перехода, и переходы между представлениями автоматически обрабатывают все необходимые параметры.

Однако присвоение уникальных имен элементам может стать сложной задачей при перемещении большого количества элементов, которые на самом деле не меняются. Если у вас есть 100 перемещаемых элементов в списке, вам нужно придумать 100 уникальных имен.

Благодаря match-element вам не нужно всего этого делать. При использовании этого параметра в качестве значения для view-transition-name браузер сгенерирует внутреннее view-transition-name для каждого найденного элемента на основе его идентификатора.

В приведенном ниже примере используется именно такой подход. Каждой карточке в ряду автоматически генерируется view-transition-name .

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

Карточке, которая появляется или исчезает, присваивается явное имя. Это имя используется в CSS для прикрепления определенных анимаций к этому снимку. Снимки всех остальных карточек оформляются с помощью связанного с ними view-transition-class .

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

В инструментах разработчика теперь отображаются правила, нацеленные на псевдообъекты, использующие view-transition-class

Для отладки переходов между представлениями можно использовать панель «Анимация» в инструментах разработчика, чтобы приостановить все анимации. Это даст вам время проверить псевдоэлементы, не беспокоясь о том, что переход между представлениями достигнет своего завершения. Вы даже можете вручную прокручивать временные шкалы анимации, чтобы увидеть, как происходят переходы.

Ранее при проверке одного из псевдоэлементов ::view-transition-* инструменты разработчика Chrome не отображали правила, предназначенные для псевдоэлементов, использующих заданный ими view-transition-class . Это изменилось в Chrome 139, где эта функциональность была добавлена.

Вложенные группы переходов между представлениями доступны начиная с Chrome 140.

При выполнении перехода между представлениями (view transition) элементы, запечатленные в снимке, отображаются в виде дерева псевдоэлементов. По умолчанию сгенерированное дерево является «плоским». Это означает, что исходная иерархия в DOM теряется, и все захваченные группы переходов между представлениями являются соседними элементами под одним псевдоэлементом ::view-transition .

Такой подход с плоским деревом достаточен для многих случаев, но становится проблематичным при использовании визуальных эффектов, таких как обрезка или 3D-преобразования. Для этого требуется определенная иерархия в дереве.

Благодаря функции "Вложенные группы переходов представления" теперь можно вкладывать псевдоэлементы ::view-transition-group друг в друга. При вложенности групп переходов представления можно восстановить такие эффекты, как обрезка во время перехода.

Узнайте, как использовать группы переходов между представлениями.

Теперь псевдоэлементы наследуют больше свойств анимации.

Когда вы задаете одно из свойств animation-* в псевдообъекте ::view-transition-group(…) , содержащиеся в нем ::view-transition-image-pair(…) , ::view-transition-old(…) и ::view-transition-new(…) также наследуют это свойство. Это удобно, поскольку автоматически синхронизирует плавный переход между ::view-transition-new(…) и ::view-transition-old(…) с ::view-transition-group(…) .

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Первоначально это наследование ограничивалось параметрами animation-duration и animation-fill-mode (а позже и animation-delay ), но теперь оно расширено и включает в себя наследование большего количества параметров анимации.

Теперь браузеры, поддерживающие переходы между представлениями, должны иметь в своей таблице стилей user-gent следующее.

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Псевдоэлементы, наследующие больше свойств, появились в Chrome 140.

Выполнение функции обратного вызова finished промиса больше не ожидает кадра.

При использовании промиса finished для выполнения функции обратного вызова Chrome раньше ждал создания кадра, прежде чем выполнять эту логику. Это могло вызвать мерцание в конце анимации, когда скрипт перемещал некоторые стили, пытаясь сохранить визуально похожее состояние.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

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

Это изменение времени выполнения было включено в Chrome 140.

Предстоящие функции

Год ещё не закончился, так что ещё есть время для выпуска новых функций.

Переходы между областями видимости готовы к тестированию в Chrome 140.

Scoped view transitions — это предлагаемое расширение API View Transition, которое позволяет запускать переход представления в поддереве DOM, вызывая element.startViewTransition() (вместо document.startViewTransition() ) для любого HTMLElement .

Ограниченные переходы позволяют одновременно запускать несколько переходов между представлениями (при условии, что у них разные корневые элементы перехода). События указателя блокируются только для этого поддерева (которое можно повторно включить), а не для всего документа. Кроме того, они позволяют элементам, находящимся за пределами корневого элемента перехода, отображаться поверх ограниченного перехода между представлениями.

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

Функция готова к тестированию в Chrome 140 с включенным флагом "Экспериментальные функции веб-платформы" в chrome://flags . Мы активно ищем отзывы разработчиков.

Положение элемента ::view-transition изменится с fixed на absolute в Chrome 142.

Псевдоэлемент ::view-transition в настоящее время позиционируется с помощью position: fixed . После решения рабочей группы CSS это будет изменено на position: absolute .

Изменение значения position с fixed на absolute (которое появится в Chrome 142) визуально незаметно, поскольку содержащий блок псевдообъекта ::view-transition в любом случае является блоком, содержащим снимок. Единственный наблюдаемый эффект — это изменение значения position при вызове getComputedStyle .

document.activeViewTransition появится в Chrome 142.

При запуске перехода между представлениями создается экземпляр ViewTransition . Этот объект содержит несколько промисов и функциональность для отслеживания хода перехода, а также позволяет выполнять такие действия, как пропуск перехода или изменение его типов.

Вместо того чтобы заставлять вас вручную отслеживать этот экземпляр, Chrome теперь предоставляет свойство document.activeViewTransition , которое представляет этот объект. Если переход не выполняется, его значение равно null .

При переходах между представлениями в рамках одного документа значение устанавливается при вызове document.startViewTransition . При переходах между представлениями в разных документах доступ к экземпляру ViewTransition можно получить в событиях pageswap и pagereveal .

Поддержка document.activeViewTransition скоро появится в Chrome 142.

Предотвратите автоматическое завершение перехода между представлениями с помощью ViewTransition.waitUntil

Анимация перехода автоматически достигает своего finished состояния, когда завершаются все анимации. Чтобы предотвратить это автоматическое завершение, вскоре можно использовать ViewTranistion.waitUntil . При передаче промиса ViewTransition достигнет своего finished состояния только тогда, когда этот переданный промис также будет разрешен.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Это изменение появится позже в этом году и позволит, например, ожидать fetch или разблокировать более простую реализацию перехода между представлениями при прокрутке .

Что дальше?

Как видите, мы не сидели сложа руки с момента первого выпуска View Transitions в 2023 году. Мы с нетерпением ждём возможности выпустить View Transitions с ограниченным охватом в будущем и, как всегда, открыты для обратной связи.

Если у вас есть вопросы о переходах между представлениями, свяжитесь с нами в социальных сетях. Запросы на добавление функций переходов между представлениями можно отправлять в рабочую группу CSS . Если вы обнаружите ошибку, сообщите нам об этом через систему отслеживания ошибок Chromium .