Опубликовано: 10 сентября 2025 г.
Переходы представлений с заданной областью действия — это предлагаемое расширение API View Transition , позволяющее инициировать переход представлений в поддереве DOM. Функция готова к тестированию в Chrome 140 с включенным флагом «Экспериментальные функции веб-платформы» в chrome://flags . Мы активно ожидаем отзывов разработчиков.
Краткое введение
Чтобы начать переход вида с ограниченной областью действия, вызовите element.startViewTransition() (вместо document.startViewTransition() ) для любого HTMLElement с примененным к нему contain: layout :.
document.querySelector('nav').startViewTransition({
callback: () => {
// … code that manipulates the contents of <nav>
},
})
Результатом является переход представления, областью действия которого является поддерево выбранного HTMLElement , а полученное псевдодерево ::view-transition внедряется в этот HTMLElement . HTMLElement выступает в качестве контейнера для анимации перехода.
html
├─ head
└─ body
├─ nav
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(thing)
│ │ └─ ::view-transition-image-pair(thing)
│ │ ├─ ::view-transition-old(thing)
│ │ └─ ::view-transition-new(thing)
│ └─ ul
│ ├─ li
│ ├─ li
│ └─ li
└─ main
└─ …
Переходы с ограниченной областью действия позволяют выполнять несколько переходов представлений одновременно (при условии, что у них разные корни переходов). События указателя блокируются только для этого поддерева ( которое можно включить повторно ), а не для всего документа. Кроме того, они позволяют отображать элементы за пределами корня перехода поверх перехода с ограниченной областью действия.
Узнайте все о переходах между видами в ограниченной области в объяснении переходов между видами .
Демо
В следующей демонстрации вы можете перемещать точку внутри её контейнера, нажав одну из кнопок. Это можно сделать с помощью переходов представлений в области документа или элемента, что позволит увидеть разницу в их поведении.
Живая демонстрация
Демо-запись
При переходах между областями представления точка остаётся обрезанной своим родительским элементом во время перехода. Более того, при отображении точка не закрашивает информер.
Требуется обратная связь
Нам интересны отзывы сообщества веб-разработчиков о:
- Форма API переходов Scoped View.
- Случаи, когда функция работает хорошо или не работает так, как ожидалось.
- Как следует решать вопросы, касающиеся самоучаствующих областей .
Поделитесь своим мнением, прокомментировав проблему CSS WG № 9890. Прежде чем оставлять отзыв, ознакомьтесь с известными проблемами и ограничениями .
Если вы столкнулись с ошибкой, сообщите нам об этом , отправив отчет об ошибке Chromium .