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

Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions), обсудив их актуальность и сделав первые шаги при помощи всего одной строки 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

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

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

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

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

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

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

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

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

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

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

@view-transition {   navigation: auto; }

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

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

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

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

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

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

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

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

Видео можно скачать или посмотреть в оригинале статьи

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

Видео можно скачать или посмотреть в оригинале статьи

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

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

<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, так как это всего лишь начало.

Telegram-канал со скидками, розыгрышами призов и новостями IT 💻