Это часть 1 нашей серии о «Будущем Astro», охватывающей три крупные новые функции, запланированные для Astro в 2024 году. Этот пост представляет обновление View Transitions API, которое Astro теперь может использовать для нативной навигации между страницами в стиле приложения без единой строки JavaScript.
View Transitions API — набор новых платформенных API, открывающих нативные переходы между страницами в браузере. Исторически это было возможно только в JavaScript-тяжёлых Single Page Applications (SPA), но недавние достижения приносят нативные переходы страниц на веб-платформу.
Пользователи Astro имели ранний доступ к view transitions с Astro 2.9. Из-за начальных ограничений браузера наша ранняя поддержка работала через внедрение JavaScript-роутера на страницу для управления анимациями. Это никогда не задумывалось как долгосрочное решение, но успешно создало раннюю площадку для экспериментов:
Смотрите демо view transitions от Joe Bell.
Попробуйте живое демо от Maxi Ferreira.
Мы ставили на то, что крупные браузеры продолжат улучшаться, и однажды мы сможем полностью убрать JavaScript-роутер-заглушку. Однажды клик по ссылке сможет запускать анимацию перехода в браузере как часть обычного потока от страницы к странице.
С радостью объявляю: этот день наконец настал. Chrome 126 (выпущен на прошлой неделе) и Microsoft Edge 126 (выпускается на этой неделе) поддерживают «cross-document view transitions», открывая view transitions без JavaScript в Astro.
Демо
Chrome и Edge постепенно раскатывают новые версии браузера, поэтому убедитесь, что у вас версия 126, прежде чем запускать демо. В Chrome текущую версию можно увидеть на chrome://settings/help. Если обновление ещё недоступно, загляните позже или используйте канал Beta или Canary.
Откройте демо astro-zerojs-transitions.vercel.app, чтобы испытать view transitions без JavaScript в браузере. В Network Panel можно убедиться, что каждый клик по ссылке вызывает полную загрузку страницы, и в браузер не отправляется JavaScript. Если браузер поддерживает это, демо должно выглядеть так:
Клон Spotify, построенный с Astro View Transitions
Если браузер не поддерживает новейшие cross-domain view transitions, сайт всё равно будет работать и отображать контент как ожидается. Однако анимации будут отключены, и навигация будет вести себя как обычная навигация в браузере (без анимации).
Включение View Transitions без JavaScript
Чтобы воспользоваться новым нативным View Transition API, достаточно добавить at-rule @view-transition на сайт. Вот весь необходимый CSS:
<style> @view-transition { navigation: auto; /* enabled! */ }</style>Примечание: встроенный CSS syntax highlighter в некоторых редакторах (например, VSCode) может не распознавать новый синтаксис at-rule @view-transition. Можно добавить комментарий вроде /* enabled! */ в CSS как временное решение для подсветки.
Чтобы включить cross-document view transitions, оба «конца» перехода должны включать это правило. Общий layout-компонент страницы — хорошее место для добавления в кодовую базу.
Обновление существующего проекта
Если вы уже использовали Astro View Transitions через компонент <ViewTransitions />, теперь безопасно удалить этот компонент и заменить его at-rule. Это уберёт внедрённый обратно совместимый JavaScript-роутер со страницы, снизив общую сложность клиентского кода.
--- import { ViewTransitions } from "astro:transitions";---<head> <ViewTransitions fallback="none" /> <style> @view-transition { navigation: auto; } <style></head>Если вы хотите, чтобы view transitions работали в старых браузерах, можете продолжать использовать обратно совместимый компонент <ViewTransitions />. Мигрировать можно, когда будете готовы. Пока нет планов убирать поддержку компонента <ViewTransitions />.
А как насчёт transition:persist?
Переходы с сохранением элементов стали популярной функцией в Astro. Директива transition:persist говорила Astro сохранять элемент при навигации, не прерывая и не нарушая его состояние. Это позволило UI вроде аудио- и видеоплееров продолжать воспроизведение между страницами, как в демо музыкального плеера от Maxi Ferreira.
К сожалению, эта функция пока не поддерживается нативной cross-document навигацией в браузере. Нативная поддержка сохраняющихся аудио- и видеоплееров может появиться в будущем, но пока можно продолжать использовать компонент <ViewTransitions />, если нужна эта дополнительная функциональность.
Будущее Astro
Навигация по ссылкам — фундаментальное поведение веба. Мы считаем это одним из самых значительных достижений Chromium и процесса спецификаций браузера в последнее время. Мы рады продолжать сотрудничество с Google Chrome и другими вендорами браузеров по мере раскатки нового API.
Разработчики могут использовать нативные view transitions уже сегодня или подождать, пока они дойдут до большего числа пользователей. Когда будете готовы включить (или мигрировать) — по сути, это изменение CSS в одну строку.
Чтобы начать, узнайте больше об Astro View Transitions. В ближайшие недели мы обновим документацию, включив использование этих новых нативных API браузера.