API перегляду переходів: плавні зміни сторінки та стану в браузері
Що робить View Transitions API, як працюють переходи між одним і тим же документом, як їх стилізувати за допомогою CSS і як ними відповідально користуватися.
Основний винос
API перегляду переходів дозволяє браузеру анімувати між двома станами сторінки. Викличте document.startViewTransition() із функцією, яка оновлює DOM, і браузер робить знімки старого та нового переглядів і анімує між ними, які ви можете стилізувати за допомогою псевдоелементів ::view-transition. Він працює в односторінкових програмах і, у підтримуваних браузерах, у навігаційних сторінках.
Як це працює
MDN описує document.startViewTransition() як початок переходу перегляду одного документа, типового для односторінкових програм. Браузер захоплює поточне подання, запускає оновлення, захоплює нове подання та анімує між ними. За замовчуванням це крос-фейд; CSS дозволяє змінити його.
Однодокументний і перехресний документ
Переходи між документами виконуються всередині однієї сторінки, як у SPA, і Chrome підтримує їх, починаючи з Chrome 111. Переходи між документами анімуються між окремими сторінками на багатосторінкових сайтах, що MDN зазначає, що історично було неможливо; вони використовують події pageswap і pagereveal і підключення до CSS. Підтримка браузерів відрізняється між цими двома, тому перевірте поточні таблиці сумісності.
Стилізація переходу
Більшість налаштувань звичайна CSS:
- Надайте елементу ім’я перегляду-переходу, щоб анімувати його окремо від решти сторінки, наприклад мініатюру, яка перетворюється на зображення героя.
- Щоб налаштувати анімацію, виберіть ::view-transition-old() і ::view-transition-new().
- Нехай тривалість буде короткою, а рух має значення.
- Оберніть користувальницькі анімації в перевірки надає перевагу зменшеному руху.
Прогресивне посилення
Завжди перевіряйте підтримку перед викликом API та оновлюйте DOM безпосередньо, якщо він відсутній. Сторінка має працювати однаково без анімації. Уникайте довгих переходів під час навігації, через які весь сайт буде сповільнюватися.
Фрагмент впровадження виробництва
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Ключі Principle, які слід запам’ятати
- startViewTransition() знімає старі та нові перегляди та анімує між ними
- Існують варіанти одного документа (SPA) і крос-документа (багатосторінкових).
- Стиль із псевдоелементами view-transition-name та ::view-transition
- Перевірте підтримку та поверніться до миттєвого оновлення
- Зберігайте переходи короткими та поважайте зменшений рух
Часті запитання
Джерела
- View Transition API — MDN Веб-документи
- Smooth transitions with the View Transition API — Chrome для розробників