API за преглед на преходи: плавни промени на страницата и състоянието в браузъра
Какво прави 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 за разработчици