Плавные переходы по страницам (View Transition)

В браузерах относительно недавно появился механизм который называется View Transition API. Эта штука, которая позволяет сделать переход между страницами плавными, а не как это происходит обычно, когда одна страница пропадает, дальше белый экран (медленно или быстро) и дальше новая страница. Причем это работает как для SPA так и MPA приложений (классический серверный рендеринг).

А зачем вообще для этого отдельное API? Разве нельзя сделать всё то же самое на чистом CSS и JavaScript?
Можно. Так и делали раньше. Но на практике это быстро превращается в сложный и хрупкий код.

Чтобы реализовать даже простой переход в SPA, приходится вручную:

— синхронизировать старое и новое состояние интерфейса
— управлять их одновременным присутствием в DOM
— анимировать оба состояния так, чтобы переход выглядел естественно
— блокировать взаимодействие пользователя на время анимации
— корректно убирать старый контент после завершения
И это только базовый сценарий. Дальше начинаются проблемы с доступностью: сбивается фокус, ломается позиция чтения

С MPA всё ещё хуже, там такие переходы в принципе были недостижимы, потому что браузер просто перезагружает страницу.

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

Можно ли его внедрять? Да, это прогрессивное улучшение. Если браузер его не поддерживает или вы его не используете, всё продолжает работать как раньше: обычная навигация, обычные обновления DOM, без анимаций.

Собственно это мы и сделали на Хекслете. Если сейчас вы походите по страницам, то заметите как плавно работает смена страниц. Старая исчезает и появляется новая. Вызывает немного странные ощущения, но вроде бы всем понравилось. Кстати, нам даже не пришлось для этого писать код, потому что эта фича заехала нам бесплатно вместе с обновлением Inertia.js.

Приятно что мы стали одними из первых во всем интернете 🙂

Как вам такие переходы?

Telegram | YouTube | Сообщество