Представьте, если бы ваш сайт мог плавно анимировать переходы между страницами — например, с index.html на about.html — без резкой перезагрузки. Что ж, теперь это возможно благодаря поддержке API View Transition в современных браузерах.
Переходы между представлениями раньше были доступны только в одностраничных приложениях (SPA). В этой статье мы рассмотрим, как переходы между представлениями привносят плавную анимированную навигацию в многостраничные приложения (MPA).
Краткий экскурс: MPA против SPA
Многостраничные приложения (MPA) и одностраничные приложения (SPA) — это два распространенных подхода к веб-разработке, каждый из которых имеет свои преимущества и недостатки.
- MPA загружает новую страницу с сервера при каждом переходе, что приводит к полной перезагрузке страницы. MPA проще создавать для крупных приложений с большим количеством различных страниц.
- SPA, с другой стороны, загружает одну страницу HTML и обновляет ее содержимое динамически с помощью JavaScript, обеспечивая более быстрые взаимодействия и более плавный пользовательский опыт, но часто требуя более сложной маршрутизации на стороне клиента и управления состоянием.
Долгое время плавные анимированные переходы были возможны только в SPA. Благодаря API View Transition, а теперь и правилу CSS @view-transition, MPA теперь могут достигать аналогичных эффектов. Переходы представлений в CSS создаются с расчетом на прогрессивное улучшение. Поэтому, если браузер их не поддерживает, сайт все равно будет работать, так как CSS рассматривается как подсказка и применяется только при наличии поддержки.
Поддержка переходов между представлениями в браузерах
Прежде чем погружаться в детали использования этой функции, стоит отметить, где переходы между представлениями поддерживаются сегодня. Спецификация CSS View Transitions имеет два уровня:
- Уровень 1 включает переходы на одной странице с помощью API View Transition. Это уже поддерживается в Chrome, Edge и Safari. Поддержка Firefox доступна в версии 144 (в настоящее время в бета-версии).
- Уровень 2 позволяет осуществлять переходы между несколькими страницами с помощью правила @view-transition. В настоящее время он поддерживается в Chrome 126+, Edge 126+ и Safari 18.2+. На момент написания этой статьи Уровень 2 все еще находится в разработке для Firefox, но поддержка ожидается в будущем.
В браузерах без поддержки переходов между представлениями сайты продолжат работать нормально со стандартной навигацией по страницам, так как переходы рассматриваются как прогрессивное улучшение и не сломают ваш сайт.
Создание вашего первого перехода между представлениями
Давайте погрузимся в процесс и посмотрим переходы между представлениями в действии.
В качестве простейшего примера вы можете включить переход, добавив всего несколько строк CSS в свой код:
И это все! Базовая версия состоит всего из нескольких строк CSS, что просто невероятно, если вы спросите меня.
Чтобы увидеть эффект этой строки кода, давайте создадим две демонстрационные страницы. Вы также можете попробовать добавить этот код в любое существующее многостраничное приложение.
Первая страница, index.html, просто содержит заголовок, несколько абзацев и ссылку для перехода на вторую страницу:
Давайте подготовим нашу вторую страницу, hobbies.html. Это тоже простая страница с заголовком, двумя короткими абзацами и ссылкой обратно на первую страницу:
Наконец, добавьте следующий рецепт в ваш файл style.css:
И это все, что нужно для создания перехода между представлениями. Всего с одной этой строкой CSS вы увидите плавный переход между двумя страницами. В прошлом такого рода плавный переход был возможен только в SPA с использованием JavaScript. С правилом CSS @view-transition браузер теперь может обрабатывать переходы между многостраничным приложением нативно, без использования JavaScript.
Выход за рамки стандартного перехода
А теперь давайте пойдем дальше и настроим переход между представлениями. Здесь мы создадим эффект появления и исчезновения с помощью сдвига (slide-in и slide-out) — простую анимацию, чтобы понять, как переходы между представлениями работают под капотом.
Давайте добавим две разные таблицы стилей к нашим двум страницам HTML. Добавьте это в index.html:
…и это в hobbies.html:
Пора познакомиться с некоторыми селекторами CSS (псевдоэлементами), которые управляют переходами между представлениями:
Давайте разберемся, как работают эти псевдоэлементы: ::view-transition-old и ::view-transition-new ссылаются на старую и новую страницы соответственно, позволяя нам стилизовать переход между ними. Когда мы переходим с index.html на hobbies.html, старая страница — это та, с которой мы уходим (index.html), а новая страница — это та, на которую мы идем (hobbies.html).
Давайте добавим анимацию сдвига, чтобы hobbies.html появлялась с плавным эффектом скольжения. Мы назовем эту анимацию slide-from-right. Добавьте следующий код в hobbies.css:
Примечание: По умолчанию анимация перехода между представлениями в браузере создает эффект перекрестного затухания (cross-fade) между старой и новой страницами путем анимации их непрозрачности и применения mix-blend-mode: plus-lighter. В этом примере мы отключили анимацию браузера по умолчанию (animation: none) и заменили ее анимацией slide-from-right. Если вы сохраните кросс-фейд по умолчанию, вы можете поэкспериментировать с различными значениями mix-blend-mode, чтобы увидеть различные эффекты перехода.
Вот как выглядит эффект появления со сдвигом:
Теперь давайте завершим этот эффект, добавив еще одну анимацию сдвига, чтобы страница hobbies.html уходила (сдвигалась) точно так же, как появилась. В этом случае мы будем переходить из hobbies.html в index.html; таким образом, hobbies.html теперь является нашей старой страницей, а index.html — новой.
Мы назовем эту анимацию slide-to-right. Добавьте этот код в index.css:
Обратите внимание, как я анимировал только hobbies.html в обоих направлениях и не добавлял никакой анимации для index.html. Вы можете анимировать оба элемента, если хотите.
Вот как в итоге будет выглядеть переход, включающий оба эффекта — появления и исчезновения со сдвигом для hobbies.html:
Посмотрите демо-страницу, чтобы увидеть результат в вашем браузере. И если вы хотите расширить эту демонстрацию, смело используйте код из репозитория mdn/dom-examples и добавьте анимацию для страницы index.html (ищите animation: none в файле index.css).
Я буду рад увидеть все те крутые переходы между представлениями, которые вы придумаете.
Заключение
Вы можете посмотреть видео моего выступления на эту тему в Mastodon на MDN.
Успешных переходов между представлениями! Пусть ваши многостраничные приложения легко скользят от страницы к странице.