Бачили вже нову "магічну" фічу у React 19 — View Transition? А знали, що це усього-навсього обгортка над цілком собі бравзерним API? Як ні, то я вам трошечки зараз розповім.

У всіх бравзерах, окрім, очевидно, Firefox, можна користуватися не таким уже й новим View Transition API, яке, по суті, дозволяє створювати красиві анімації переходу між станами сторінки без застосування складних бібліотек.

Під капотом усе настільки просто, що аж трохи нудно. Коли ви ініціюєте View Transition, бравзер просто робить знімок поточного вигляду сторінки, потім — нового стану (після оновлення DOM або переходу на інший документ), і між цими двома “картинками” програє анімацію.

Тобто ви бачите плавний перехід не між реальними DOM-елементами, а між двома скриншотами. А вже після завершення анімації користувачеві показується справжній, оновлений DOM.

Це можна зробити або за допомогою CSS, задаючи анімацію як усій сторінці, так і певним її регіонам:

.fade {
  view-transition-name: fade;
}

::view-transition-old(fade) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(fade) {
  animation: fade-in 0.3s ease;
}

Або за допомогою JavaScript:

document.startViewTransition(() => {
  // оновлення DOM
});

React у цьому плані нічого кардинально нового не вигадує. Він просто пропонує синтаксичний “цукор” у вигляді функції startViewTransition та експериментального компонента unstable_ViewTransition. По суті — той самий document.startViewTransition() під капотом.

import { unstable_ViewTransition as ViewTransition } from 'react';

<ViewTransition>
  <div>...</div>
</ViewTransition>

Попри те, що View Transitions поки підтримуються лише в Chromium-бравзерах — таких як Chrome, Edge чи Opera — це не причина уникати їх використання. У бравзерах без підтримки (наприклад, Firefox) анімації просто не спрацюють, якщо задавати їх через CSS, ну а для JS треба просто перевіряти підтримку фічі. Тобто функціональність залишається незмінною, а View Transitions виступають як прогресивне покращення. Їх можна сміливо впроваджувати вже зараз, не хвилюючись про деградацію UX.

За вподобайки й поширення окремо нагадати, чи самі все знаєте?

Тож, підсумовуючи, View Transitions — це не частина React, а повноцінне бравзерне API. React лише пропонує зручний синтаксичний інтерфейс для його використання, не втручаючись у саму логіку анімації. Тому, хоча підтримка поки й обмежена, технічно і концептуально це абсолютно безпечна інновація для поступового впровадження навіть у продакшн.

🔗 MDN
🔗 Smooth transitions with the View Transition API
🔗 React <ViewTransition>

@babichdev

.