Перейти к содержанию

Простой гайд по View Transitions

Представьте, что ваш сайт мог бы плавно анимировать переходы между страницами — скажем, с index.html на about.html — без резкой перезагрузки. Это стало возможным благодаря поддержке View Transition API в современных браузерах.

View Transitions раньше были доступны только для одностраничных приложений (SPA). В этой статье мы рассмотрим, как view transitions обеспечивают плавную анимированную навигацию в многостраничных приложениях (MPA).

Краткое напоминание о MPA и SPA

Многостраничные приложения (MPA) и одностраничные приложения (SPA) — это два распространённых подхода к веб-разработке, каждый со своими преимуществами и недостатками.

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

Долгое время плавные анимированные переходы были возможны только в SPA. С появлением View Transition API — и теперь CSS-правила @view-transition — MPA тоже могут достичь подобных эффектов. CSS view transitions разработаны с учётом прогрессивного улучшения. Если браузер их не поддерживает, сайт всё равно будет работать, поскольку CSS рассматривается как подсказка и применяется только при наличии поддержки.

Поддержка view transitions в браузерах

Прежде чем погрузиться в детали использования этой функции, стоит отметить, где view transitions поддерживаются сегодня. Спецификация CSS View Transitions имеет два уровня:

  • Уровень 1 позволяет осуществлять переходы внутри одной страницы с помощью View Transition API. Это уже поддерживается в Chrome, Edge и Safari. Поддержка Firefox доступна в версии 144 (в настоящее время в бета-версии).
  • Уровень 2 позволяет осуществлять переходы между несколькими страницами через правило @view-transition. В настоящее время поддерживается в Chrome 126+, Edge 126+ и Safari 18.2+. На момент написания этой статьи Уровень 2 всё ещё находится в разработке для Firefox, но поддержка ожидается в будущем.

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

Создаём первый view transition

Давайте углубимся и посмотрим на view transitions в действии.

В качестве простейшего примера вы можете включить переход, добавив всего несколько строк CSS в ваш код:

1
2
3
@view-transition {
    navigation: auto;
}

И это всё! Базовая версия — это всего несколько строк CSS, что невероятно, если вы спросите меня.

Чтобы увидеть эффект этой строки кода, давайте создадим две демо-страницы. Вы также можете попробовать добавить этот код в любое существующее многостраничное приложение.

Первая страница, index.html, содержит только заголовок, несколько абзацев и ссылку для перехода на вторую страницу:

1
2
3
4
5
6
<h1>🏡 Главная страница</h1>
<p>Привет, меня зовут Миссис Усики. Добро пожаловать на мой личный сайт!</p>
<p>
    Каждому нужно место в интернете, даже коту. Если вам интересно, вы можете
    узнать больше о моих <a href="hobbies.html">хобби</a>.
</p>

Подготовим вторую страницу, hobbies.html. Это тоже простая страница с заголовком, двумя короткими абзацами и ссылкой обратно на первую страницу:

1
2
3
4
5
6
7
8
9
<h1>🧶 Мои хобби</h1>
<p>
    Когда я не занята дремотой, я люблю играть с клубками ниток и гоняться за
    лазерными указками. Я также заядлый наблюдатель за птицами.
</p>
<p>
    Спасибо за ваш интерес! Теперь вы можете вернуться на
    <a href="index.html">главную страницу</a>.
</p>

Наконец, добавьте следующий рецепт в ваш файл style.css:

1
2
3
@view-transition {
    navigation: auto;
}

И это всё, что нужно для создания view transition. Всего с одной строкой CSS вы увидите плавный переход между двумя страницами. Раньше такой плавный переход был возможен только в SPA с использованием JavaScript. С CSS-правилом @view-transition браузер теперь может обрабатывать переходы в многостраничных приложениях нативно, без необходимости JavaScript.

Выходим за рамки стандартного перехода

Теперь давайте пойдём дальше и настроим view transition. Здесь мы создадим эффект появления и исчезновения со скольжением — простую анимацию, чтобы понять, как view transitions работают под капотом.

Добавим две разные таблицы стилей к нашим двум HTML-страницам. Добавьте это в index.html:

1
<link rel="stylesheet" href="index.css" />

…и это в hobbies.html:

1
<link rel="stylesheet" href="hobbies.css" />

Пришло время познакомиться с CSS-селекторами (псевдоэлементами), которые управляют view transitions:

1
2
3
4
::view-transition-old(root),
::view-transition-new(root) {
    /* Напишите крутой CSS здесь */
}

Давайте разберёмся, как работают эти псевдоэлементы: ::view-transition-old и ::view-transition-new ссылаются на старую и новую страницы соответственно, позволяя нам стилизовать переход между ними. Когда мы переходим с index.html на hobbies.html, старая страница — это та, с которой мы уходим (index.html), а новая страница — та, на которую мы переходим (hobbies.html).

Добавим анимацию скольжения, чтобы hobbies.html появлялась с плавным эффектом. Назовём эту анимацию slide-from-right. Добавьте следующий код в hobbies.css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
@keyframes slide-from-right {
    from {
        /* Появляется справа */
        transform: translateX(100vw);
    }
    to {
        /* Входит в поле зрения */
        transform: translateX(0);
    }
}

::view-transition-old(root) {
    animation: none;
}

::view-transition-new(root) {
    /* Применяем анимацию к hobbies.html */
    animation: slide-from-right 0.3s;
}

!!note ""

1
По умолчанию [анимация view transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process) браузера создаёт плавное затухание между старой и новой страницами, анимируя их `opacity` и применяя [`mix-blend-mode: plus-lighter`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::view-transition-old). В этом примере мы очистили стандартную анимацию браузера (`animation: none`) и заменили её анимацией `slide-from-right`. Если вы оставите стандартное затухание, вы можете поэкспериментировать с различными значениями [`mix-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mix-blend-mode), чтобы увидеть различные эффекты перехода.

Вот как выглядит эффект появления со скольжением:

Теперь давайте завершим этот эффект, добавив ещё одну анимацию скольжения, чтобы страница hobbies.html уходила тем же способом, каким появилась. В этом случае мы будем переходить с hobbies.html на index.html; таким образом, hobbies.html теперь наша старая страница, а index.html — новая.

Назовём эту анимацию slide-to-right. Добавьте этот код в index.css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
@keyframes slide-to-right {
    from {
        /* Начинаем с видимой области экрана */
        transform: translateX(0);
    }

    to {
        /* Уходим вправо */
        transform: translateX(100vw);
    }
}

::view-transition-old(root) {
    /* Применяем @keyframes к hobbies.html */
    animation: slide-to-right 0.3s;
    z-index: 2;
}

::view-transition-new(root) {
    animation: none;
}

Обратите внимание, что я анимировал только hobbies.html в обоих направлениях и не добавлял никакой анимации к index.html. Вы можете анимировать обе страницы, если хотите.

Вот как будет выглядеть переход в итоге, включая эффекты появления и исчезновения со скольжением для hobbies.html:

Посмотрите демо-страницу, чтобы увидеть результат в вашем браузере. И если вы хотите расширить это демо, не стесняйтесь использовать код из репозитория mdn/dom-examples и добавить анимацию для страницы index.html (ищите animation: none в файле index.css).

Источник: https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide/