Всего несколько строк CSS для плавных переходов между страницами

Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions ^[1]), обсудив их актуальность и сделав первые шаги при помощи всего одной строки CSS.

Давняя зависть веб-среды к нативным приложениям

Запуск iPhone совпал с новым витком развития веб-среды, а, может, даже способствовал ему. Спустя годы стагнации на фоне доминирования Internet Explorer, появление Safari и Firefox оживило в этой среде соперничество и инновации. Уникальным преимуществом iPhone, во что сегодня уже сложно поверить, стал «полноценный Safari» для мобильных устройств.

Команда Safari добавила нативные возможности CSS вроде градиентов, скруглённых углов, веб-шрифтов, переходов, анимаций и преобразований, сделав плавный интерактивный опыт работы в интернете реальностью.

После этого появились нативные приложения iPhone с их мягкими, анимированными переходами между представлениями, выдвижными панелями и виджетами, а также приятным тактильным реагированием на действия пользователя. Традиционная многостраничная архитектура веб-среды не шла ни в какое сравнение с таким опытом. Переходы в ней происходили неуклюже и ввиду загрузки новых страниц через тормозные сети 3G сопровождались возникновением чёрного экрана. Да и механизмы отрисовки на микросхемах 2010-х годов работали медленно.

Бытовало мнение, что нативные приложения по своей природе лучше веб-аналогов. И в плане удобства UI было сложно утверждать обратное.

Крайняя точка оказалась достигнута где-то в августе 2010-го, когда журнал «Wired», являвшийся тогда библией мира технологий, на своей первой полосе заявил:

Интернет мёртв. Да здравствует интернет

Спустя два десятилетия с момента своего зарождения, всемирную паутину затмили Skype, Netflix, одноранговая связь и четверть миллиона других приложений.

И проблемой стали не только угрюмые переходы. Веб-приложениям также недоставало доступа к API платформ, таким как адресные книги, камеры и Bluetooth — возможностям, за счёт которых нативные приложения вирусно распространялись и предоставляли новейший опыт работы. Да и отсутствие плавных переходов в UI явно не помогало.

Интернет выжил, но сравниться с нативными приложениями по-прежнему не может. Ощутимым ответом на этот вызов стала архитектура одностраничных приложений (Single Page App, SPA).

Одностраничные приложения: затратное решение

SPA обошли необходимость скачивать каждое состояние в виде отдельной страницы и избавились от невзрачных переходов за счёт выполнения всего приложения на одной странице. Теперь переключение между состояниями стало возможным реализовывать с помощью CSS-переходов и анимаций. Тем не менее SPA привнесли свой собственный набор проблем, с которыми мы имеем дело до сих пор.

Во-первых, для использования приложения его сперва нужно целиком скачать. И это было приемлемо для приложений из AppStore, но шло вразрез с характерной для веб-среды философией «мгновенности». Хуже всего длительные периоды загрузки сказались на мобильных устройствах. Причём это представляло не только вызов для UX-дизайна, но и вело к лишним тратам, поскольку десять лет назад стоимость мобильной передачи данных была довольно высока. Да и сегодня для многих людей она остаётся таковой. Кроме того, всю логику приложения потенциально требовалось передавать множество раз для каждого пользователя.

Модель гидратации SPA (скачивание оболочки приложения с последующей отрисовки его основной части при помощи JavaScript) серьёзно сказывалась на производительности устройства. В те времена веб-среда не могла похвастаться широкими возможностями оффлайн-обработки и кэширования. Зачастую при каждом использовании приложения его приходилось скачивать целиком. В дальнейшем также выяснилось, что SPA затрудняют поисковую оптимизацию (SEO), подразумевают сложные базы данных, имеют проблемы с доступностью, и их трудно обслуживать. Всё это отчасти стало следствием попытки сэмулировать опыт работы с нативным приложением.

И шуточное описание одностраничников как «феномена с нулевой отдачей» несло в себе долю правды.

Новая надежда: View Transitions API

Но сегодня или в ближайшем будущем мы уже сможем создавать многостраничные приложения с переходами между представлениями ^[2] (View Transitions). Веб-среде потребовалось более десяти лет, чтобы среагировать, но функциональность View Transitions вкупе с экспериментальным Speculation Rules API ^[3] сулят значительное упрощение архитектуры и уменьшение общей сложности.

Далее я вкратце расскажу, чего конкретно ожидать (и что уже доступно), а также приведу ту самую строку CSS, которая добавит View Transitions в ваше приложение или сайт. На октябрь 2024 года эта функциональность поддерживается в Chrome и Safari Technology Preview.

Знакомство с View Transitions

View Transitions API позволяет:

• Анимировать в SPA переход между состояниями DOM.
• Анимировать переход между документами в многостраничных приложениях (MPA) или веб-сайтах, как мы привыкли их называть.

Теперь переходы между состояниями можно делать сложными, так как новый API позволяет создавать проработанные анимации. Но мы начнём с простого.

▍ Простой переход между страницами

Взглянем на классический переход между страницами, который за счёт использования соотношения сторон и отложенной загрузки изображений происходит быстро и чётко, но при этом слишком резок…

Видео можно скачать ^[4] либо посмотреть в оригинале статьи ^[5]

А теперь смягчим его, добавив магическую строку CSS:

@view-transition {
  navigation: auto;
}

Ну ладно, я слукавил — здесь три строки. Но вы можете написать их в одну (всё же, CSS — это вам не Python).

А вот этот код в действии (поддерживается в Chrome и Safari Tech Preview):

Видео можно скачать ^[6] либо посмотреть в оригинале статьи ^[5]

Переход стал более плавный. Никакого JS, библиотек или зависимостей — лишь приятное прогрессивное улучшение. Если вы хотите увидеть этот эффект в работе, зайдите на Conffab ^[7], где он используется для всех переходов.

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

Добавление динамических переходов

Используя лишь немного дополнительного CSS-кода, переходы также можно делать более динамичными.

Ниже я привёл видео «до» и «после». На первом показано, как браузеры традиционно отрисовывали переходы между страницами:

Видео можно скачать ^[8] или посмотреть в оригинале статьи ^[5]

А на втором то, как Chrome отрисовывает их новую версию, о чём мы подробнее поговорим далее:

Видео можно скачать ^[9] или посмотреть в оригинале статьи ^[5]

Надеюсь, вы согласитесь, что это намного более привлекательный эффект. Но как его получить?

На нашей основной странице, где находятся ссылки на отдельные сеансы, есть одна граница перехода, которая выглядит так:

<section id="speaker-marco-rogers" style="view-transition-name: marco-rogers-hero"></section>
<section id="speaker-maria-farrell" style="view-transition-name: maria-farrell-hero"></section>

На целевых же страницах у нас есть следующие элементы:

<section id="session-details" style="view-transition-name: marco-rogers-hero"></section>
<section id="session-details" style="view-transition-name: maria-farrell-hero"></section>

Обратите внимание, что у этих двух «границ» перехода совпадают значения view-transition-name. Они сообщают браузеру, между какими элементами DOM нужно делать переход.

Встроенные стили не всегда идеальны, но в данном случае, с учётом имеющейся базы кода, это было самое простое решение. В качестве альтернативы можете применить стиль с помощью CSS, если есть возможность уникально выбирать конечные точки на странице (так как значения view-transition-name должны быть уникальными на любой отдельно взятой странице, чтобы браузер знал, между какими элементами создавать переход).

На момент написания статьи этот более сложный пример может иметь проблемы в Tech Preview для Safari 18, но я уверен, что вскоре это поправят. Главное, что разработчики Safari решили вложиться в эту функциональность.

Что дальше?

Для начала добавьте эту простую строку на все свои сайты, чтобы обеспечить плавные переходы.

Затем подумайте о создании более специфичных переходов вроде такого, который был показан во втором примере. Для генерируемых страниц добавление атрибутов view-transition-name может не представлять особых проблем, и, в зависимости от HTML-структуры, требовать лишь немного CSS-кода.

Ещё нюанс. Эффекты анимации могут создавать сложности для некоторых людей, например, для страдающих вестибулярными отклонениями. Поэтому здесь важно также учесть предпочтения пользователей. И сделать это в случае View Transitions очень просто. После изначального правила @view-transition добавьте:

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

Теперь, если предпочтения пользователя установлены на reduced motion (ограничение динамичности), при навигации между страниц никакие переходы активироваться не будут.

Ну и рекомендую более детально изучить, что ещё умеет View Transitions API, так как это всего лишь начало.