Опубликовано: 27 марта 2026 г.
В Chrome 147 появилась функция переходов между представлениями, ограниченная областью видимости элемента, которая позволяет начать переход между представлениями в поддереве DOM, вызвав метод Element.startViewTransition() .
Эта функция позволяет одновременно запускать несколько переходов между представлениями, дает возможность вкладывать текущие переходы между представлениями друг в друга и решает проблемы наложения с помощью position: fixed содержимого — и все это при сохранении интерактивности остальной части страницы.
Что изменилось?
С момента объявления о готовности этой функции к тестированию разработчиками в Chrome 140 , мы сотрудничали с сообществом и рабочей группой CSS для завершения проработки деталей, особенно в отношении поведения по умолчанию:
- Корневые области видимости по умолчанию являются самоучаствующими.
- Вложенные переходы между представлениями автоматически содержат свои псевдонимы с помощью вложенных групп переходов между представлениями .
- Псевдообъект
::view-transition-group-children()в ограниченном пространстве переходов между представлениями автоматически обрезает свое содержимое, если корневая область видимости обрезает его переполнение. - В процессе перехода элементы, ограниченные областью видимости, автоматически применяют
contain: layoutиview-transition-scope: allк корневому элементу области видимости.
После этих обновлений переходы между представлениями, ограниченные областью действия элемента, стали доступны в стабильной версии Chrome , начиная с версии 147.
Демонстрации
Перетасовка списков
В этой демонстрации вы можете перемешивать элементы в каждом списке. Вы также можете менять местами списки, выбрав кнопку в центре.
Живая демонстрация
Демо-запись
Поскольку используются переходы между представлениями, ограниченные областью видимости элементов, оба списка могут одновременно выполнять переходы при перемешивании элементов. Вы также можете запустить переход внешнего представления, который меняет местами элементы списков, пока элементы списка еще находятся в процессе реорганизации.
Моя поездка в Патагонию
Демонстрационный ролик "Мое путешествие в Патагонию" показывает переходы между элементами интерфейса. Этот ролик создан на основе видеоролика кампании "Переосмысление веб-UX" .
Используйте выпадающие списки для фильтрации элементов сетки. С помощью кнопки «Добавить » для каждого элемента сетки добавьте его в список выбранных элементов, который отображается на боковой панели .
Живая демонстрация
Чтобы посмотреть полную демоверсию, откройте раздел "Моя поездка в Патагонию" в отдельной вкладке.
Демо-запись
В демонстрации переходы между представлениями, ограниченные областью видимости элемента, используются в трех местах:
- Сетка элементов при их фильтрации.
- Элементы сетки при добавлении их в список выбранных элементов.
- Боковая панель, отображающая список выбранных элементов.
Прочитайте руководство
Чтобы узнать все о переходах между элементами представления, прочтите руководство . В нем показано, как реализовать переходы между элементами представления, объясняются дополнительные детали и приводятся дополнительные примеры.