Всего несколько строк CSS для плавных переходов между страницами⁠⁠

Я давно не рекомендовал ничего почитать, но эта короткая статья не оставила меня равнодушным.

"Всего несколько строк CSS для плавных переходов между страницами"

• перевод на хабре

• оригинал

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

В статье автор предлагает сделать переходы между страницами плавными с помощью одной строчки кода.

@View-transition { navigation: auto; }

Чтобы понять о чём говорит автор просто посмотрите прикреплённое видео:

• или откройте оригинал статьи и воспроизведите видео

• или же откройте мой блог и попробуйте перейти на одну из последних статей

В SPA приложениях также есть возможность использовать View Transitions API. Можете посмотреть демки в статье: "Введение в View Transitions API".  Анимация реализуется с помощью startViewTransition

document.startViewTransition(() => updateTheDOMSomehow());

При использовании View Transitions API происходит следующее:

• делается снимок текущего состояния страницы

• выполняется обновление DOM (updateTheDOMSomehow)

• делается снимок нового состояния страницы

• переход между этими состояниями анимируется с помощью дефолтного плавного затухания или с помощью кастомной анимации

Более сложные примеры  можно узнать отсюда:

• The View Transitions API And Delightful UI Animations (Part 1)

• The View Transitions API And Delightful UI Animations (Part 2)

• Никита Дубко. По-настоящему красивые переходы средствами браузера

Для блогов на Astro:

• Документация View Transitions в доке Astro

• Как починить темную и светлую темы после внедрения view transitions — читать тут