20 декабря 2024 г. (изменено: 20 декабря 2024 г.)
Канал: @cherkashindev
Я давно не рекомендовал ничего почитать, но эта короткая статья не оставила меня равнодушным.
“Всего несколько строк 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 — читать тут
@cherkashindev