Сегодня мы хотели бы рассказать подробнее о пути Chrome и Astro к API View Transitions . Это включает в себя то, как сообщество Astro приняло API и экспериментировало с ним на ранних этапах, подчеркивая возможности более широкого сообщества. Мы также рады рассказать больше о новой встроенной поддержке View Transitions в Astro 3.0!
Фон
Бесшовные переходы между различными состояниями страницы, известные как переходы между состояниями, всегда были сложным аспектом создания плавных, анимированных интерфейсов в Интернете. Несмотря на доступность таких инструментов, как CSS-переходы, CSS-анимация и API веб-анимации, создание переходов между состояниями остается сложной задачей. Одной из проблем является обработка взаимодействия с исходящими элементами, что может усложнить переходы.
Кроме того, сложно поддерживать положение чтения и концентрацию внимания при использовании вспомогательных устройств. А работа с различиями в положениях прокрутки делает переходы между состояниями громоздким процессом. Все эти факторы усложняют реализацию плавных переходов между различными элементами на веб-странице.
API View Transitions появился как решение браузера этих проблем. Этот новый API обеспечивает более простой способ изменения DOM за один шаг, создавая анимированный переход между двумя состояниями.
Запуск API View Transitions в Chrome 111 ознаменовал начало более широкого видения поддержки переходов для всех веб-сайтов, а не только для веб-приложений на основе JavaScript. Будущие усовершенствования также находятся на подходе. В будущем Chrome может изучить такие интересные дополнения, как переходы между документами, анимацию, управляемую компоновщиком, переходы с ограниченной областью и вложенные группы переходов.
Ранние исследования с переходами между видами
Путь Chrome с View Transitions API не был единственным. Обратная связь и сотрудничество разработчиков, авторов фреймворков и рабочей группы CSS сыграли решающую роль в формировании этой функции на протяжении нескольких лет.
Эксперименты разработчиков сыграли решающую роль на раннем этапе. Самые ранние версии API не поддерживали анимацию CSS, а переходы были ограничены несколькими ограничительными пресетами. Ранние отзывы ясно дали понять, что разработчики хотели, чтобы переходы были полностью настраиваемыми и выразительными. Такое постоянное сотрудничество обеспечило баланс между хорошими настройками по умолчанию, расширяемостью и настройкой API.
Astro был одним из тех фреймворков, которые рано опирались на View Transitions. Остальная часть этой статьи написана с точки зрения команды Astro и делится их опытом поиска, внедрения и внедрения View Transitions в центр веб-разработки.
Почему Astro делает ставку на переходы между просмотрами
Astro долгое время искал что-то вроде View Transitions. Astro — это веб-фреймворк JavaScript, который преобразует серверные компоненты пользовательского интерфейса в облегченный HTML для более быстрой загрузки страниц. Astro намеренно переносит как можно больше работы с клиентского устройства. Веб-сайты Astro используют встроенную навигацию по страницам браузера, в то время как другие веб-платформы могут вместо этого перехватывать навигацию браузера с помощью маршрутизации на стороне клиента JavaScript.
Этот компромисс создал проблему для команды Astro: как Astro может анимировать переходы страниц и обеспечивать сохранение пользовательского интерфейса на разных страницах, как в приложении, без использования маршрутизации на стороне клиента?
Переходы просмотра были ответом. С помощью View Transitions Astro может предоставить те же функции маршрутизации, которые предлагают веб-фреймворки SPA с большим количеством JavaScript, но без увеличения производительности и сложности маршрутизации на стороне клиента. Другие фреймворки рассматривали View Transitions как необязательную деталь реализации, но для Astro это было нечто гораздо большее.
Следующий вопрос, на который должна была ответить команда Astro, был: «Как?» В поисках вдохновения команда обратилась к таким проектам, как Turbo, Swup и Livewire, и даже создала прототипы нескольких подобных подходов внутри Astro.
Одна из самых ранних попыток включала полностраничный «умный переход», который автоматически сравнивал каждую новую страницу HTML с текущим HTML, а затем пытался заменить каждый элемент сразу с помощью JavaScript. Это было умно, но подвержено ошибкам.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
К счастью, сообщество Astro показало, что API View Transitions уже является мощным, но при этом продукт не усложняет ситуацию. Посмотрев несколько ранних демонстраций, команда Astro увлеклась идеей простого Astro API, который мог бы максимально точно соответствовать API браузера. Вместо того, чтобы рассматривать переходы просмотра как невидимую деталь реализации, спрятанную внутри Astro, они могут быть напрямую доступны разработчику. Согласование Astro напрямую с веб-платформой и снижение общей сложности интерфейса.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
Работа стала простой: внедрить новый API View Transitions в Astro и обеспечить автоматические резервные варианты, которые будут доступны как можно большему количеству веб-сайтов и браузеров. Резервная поддержка имеет важное значение, поскольку большинство браузеров (за исключением Chrome) еще не реализовали полную поддержку встроенных переходов просмотра.
Запуск официальной поддержки в Astro
Astro выпустила экспериментальную поддержку View Transitions в Astro 2.9. Реакция была положительной сразу. Разработчики начали делиться невероятными демо-версиями множества различных вариантов использования, а в некоторых случаях даже отправлять все это в производство.
В Astro 3.0 завершается поддержка и снимается флаг нового API View Transitions для всех. Эти новые API-интерфейсы теперь готовы к использованию экспериментально или сразу.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Неожиданным преимуществом согласования Astro с API платформы является возможность экспериментировать с созданием новых функций поверх собственного API View Transitions. Например, новая директива transition:persist позволяет любому элементу сохраняться при полностраничной навигации. Это обеспечивает работу долгоживущих элементов, таких как постоянные аудио- и видеоплееры, что раньше было возможно только в тяжелых JavaScript SPA.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Astro также может сделать View Transitions более эргономичным для разработчика. Например, команда уже добавила поддержку настраиваемой анимации вперед/назад и анимации для динамического HTML. Обе эти функции сложно реализовать только с помощью API нижнего уровня, но в Astro они практически не требуют усилий.
Эти функции пока доступны только в Astro, но команда Astro надеется передать свой опыт авторам спецификаций и рабочим группам для потенциальных улучшений браузера в будущем. Например, внимательно отслеживая предложение упростить обмен анимацией в CSS.
Что будет дальше?
Будущее View Transitions в Интернете светлое. Astro, Nuxt и HTMX предоставили некоторую степень поддержки, и многие другие выразили интерес.
Команда Chrome в восторге от встроенной поддержки View Transitions в Astro. Это большой шаг для веб-разработки, обеспечивающий более плавный и динамичный пользовательский интерфейс. Разработчики, мы рекомендуем вам погрузиться в просмотр переходов в Astro 3.0. Независимо от того, создаете ли вы новые целевые страницы или обновляете существующие сайты, эти улучшения меняют правила игры. View Transitions помог заполнить пробел между возможностями SPA и MPA. Chrome хотел бы услышать от вас, есть ли дополнительные пробелы в поддержке SPA и/или MPA. Не стесняйтесь комментировать репозиторий View Transitions WICG GitHub , чтобы обсудить это дальше.
Нас уже вдохновили инновационные демо-версии и приложения, которые мы видели, и нам не терпится увидеть больше. Ваша работа с View Transitions формирует будущее Интернета. Попробуйте View Transitions в Astro, поделитесь своей работой, и давайте продолжим это путешествие вместе.