Пост✨ View Transitions API — одна строка CSS, и ваш сайт оживает

✨ View Transitions API — одна строка CSS, и ваш сайт оживает Помните, как раньше для плавных переходов между страницами нужен был SPA-фреймворк, React Router и куча анимационной логики? Теперь это делается нативно в браузере. Одной строкой. View Transition API позволяет создавать кинематографичные переходы между страницами — и в SPA, и (что важнее) в обычных многостраничных сайтах. Браузер сам делает скриншоты старого и нового состояний и анимирует разницу через CSS Animations. ▪️ Для SPA — оборачиваете обновление DOM в document.startViewTransition(): document.startViewTransition(() => { updateTheDOMSomehow(); }); ▪️ Для MPA (многостраничник) — вообще без JS. Добавляете в CSS обеих страниц: @view-transition { navigation: auto; } И всё. Браузер сам подхватит навигацию и сделает плавный переход. Что можно анимировать: превращение миниатюры в полную картинку, фиксированную навигацию между страницами, перестройку сетки при фильтрации. Работает в Chrome 126+ для MPA, в Chrome 111+ для SPA. Firefox и Safari пока догоняют. Это один из тех случаев, когда веб-платформа забирает себе то, что раньше требовало библиотек. Как когда-то CSS Grid убил float-сетки — так и View Transitions убивает кастомные page-transition хаки. 🔗 Документация Chrome #css #frontend #webapi