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

Bramus

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

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

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

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

Лучшая поддержка браузеров и фреймворков

Переходы между представлениями одного и того же документа скоро станут базовыми. Новая версия доступна

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

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

Поддержка View Transition API теперь доступна в ядре 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;
}

DevTools теперь показывает правила, нацеленные на псевдообъекты, которые используют view-transition-class

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

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

Группы переходов вложенных представлений доступны с Chrome 140.

При выполнении перехода между представлениями, снимки элементов отображаются в дереве псевдоэлементов. По умолчанию генерируемое дерево является «плоским». Это означает, что исходная иерархия в 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-agent

: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

Переходы представлений с заданной областью действия — это предлагаемое расширение API перехода представлений, которое позволяет вам начинать переход представлений в поддереве 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 году. Мы с нетерпением ждем возможности реализовать функцию scoped view transitions в будущем и, как всегда, открыты для отзывов.

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

Bramus

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

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

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

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

Лучшая поддержка браузеров и фреймворков

Переходы между представлениями одного и того же документа скоро станут базовыми. Новая версия доступна

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

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

Поддержка View Transition API теперь доступна в ядре 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;
}

DevTools теперь показывает правила, нацеленные на псевдообъекты, которые используют view-transition-class

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

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

Группы переходов вложенных представлений доступны с Chrome 140.

При выполнении перехода между представлениями, снимки элементов отображаются в дереве псевдоэлементов. По умолчанию генерируемое дерево является «плоским». Это означает, что исходная иерархия в 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-agent

: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

Переходы представлений с заданной областью действия — это предлагаемое расширение API перехода представлений, которое позволяет вам начинать переход представлений в поддереве 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 году. Мы с нетерпением ждем возможности реализовать функцию scoped view transitions в будущем и, как всегда, открыты для отзывов.

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