Плавные переходы между страницами без SPA

Раньше анимированные переходы между экранами были привилегией SPA: ради эффекта приходилось тащить в проект React и библиотеки вроде Framer Motion. Теперь то же самое умеют обычные многостраничные сайты — нативно, силами браузера.

Кросс-документный View Transitions API включается одним CSS-правилом @view-transition с navigation: auto на обеих страницах. Этого уже достаточно для плавного перехода. Дальше анимация тонко настраивается через псевдоэлементы и @keyframes, а свойство view-transition-name даёт morph-эффекты: превью из списка плавно вырастает в обложку статьи — без единой строчки JavaScript.

Для проектов на Laravel, WordPress и статике это значит, что плавность интерфейса теперь доступна бесплатно. В новой статье разобрали включение, настройку анимаций, именованные переходы и управление через события pageswap и pagereveal.

https://prog-time.ru/view-transitions-api-dlya-mnogostranichnyh-sajtov/