Новый View Transitions API предлагает более простой способ анимации между двумя состояниями DOM — даже между загрузками страницы. Это прогрессивное усовершенствование, работающее уже сегодня.

CSS-переходы и анимация произвели революцию в веб-эффектах за последнее десятилетие, но не все так просто. Рассмотрим список элементов — например, десять изображений с заголовками, — который мы хотим перевести в новый список элементов с помощью эффекта cross-fade. Текущий подход:

1. Сохранить старые элементы DOM
2. Создать новые DOM-элементы, добавить их на страницу, обеспечив соответствующее расположение
3. Затухание старого набора при появлении нового набора, затем
(опционально) Заменить старые элементы DOM на новые

До сих пор не было возможности просто обновить DOM — до сих пор! View Transitions API использует следующий процесс:

1. API делает снимок текущего состояния страницы.
2. При необходимости мы обновляем DOM, добавляя или удаляя элементы.
3. API делает снимок нового состояния страницы.
4. API выполняет анимацию между двумя состояниями, используя стандартное затухание или любые CSS-анимации, которые мы определим.

Нам нужно только обновить DOM, как мы это уже делаем. Несколько строк дополнительного кода могут постепенно улучшать страницу при наличии View Transitions API для создания эффектов, похожих на презентацию.

API является экспериментальным, но последние браузеры на базе Chromium поддерживают внутристраничные эффекты, основанные на DOM одного документа.

View Transition API для навигации также доступен в Chrome 115+ и предлагает анимацию между загрузками отдельных страниц — как, например, на типичных сайтах WordPress. Это ещё проще в использовании и не требует использования JavaScript.

Mozilla и Apple не раскрыли своих намерений по внедрению API в Firefox и Safari. Любой браузер без View Transitions API будет продолжать работать, поэтому добавлять эффекты можно уже сегодня.

https://www.dev-notes.ru/articles/javascript/view-transitions-api-introduction/