Переходы между страницами как в приложении: View Transitions без тяжёлого JavaScript

View Transitions – функция браузера, с которой сайт анимирует переход с одной страницы на другую без JavaScript-библиотек. Для переходов между отдельными страницами (cross-document) достаточно CSS-правила @view-transition { navigation: auto; } на обеих страницах, и работают они только в пределах одного домена. Chrome и Edge поддерживают их с версии 126 (июнь 2024 года), Safari с версии 18.2 (декабрь 2024 года). В стабильной версии Firefox 159, вышедшей 27.10.2026, переходов между страницами пока нет, но они входят в число направлений Interop 2026. Браузер без поддержки просто открывает следующую страницу, как и раньше, только без анимации. Ниже: где переходы помогают посетителю понять, куда он попал, где их лучше не ставить, как сочетать их с предварительной загрузкой следующей страницы и как проверить, что сайт не стал медленнее.

Как работают переходы между страницами с View Transitions

Когда посетитель нажимает на ссылку, браузер делает снимок старой страницы, дожидается новой и на мгновение накладывает их друг на друга. По умолчанию старая страница растворяется, а новая проявляется. Если у элемента на обеих страницах одинаковое view-transition-name, браузер анимирует его отдельно: перемещает и масштабирует со старого места на новое. Так изображение карточки в портфолио может вырасти в главное изображение страницы проекта, и человек видит, что открыл именно тот проект, на который нажал.

В документации Chrome условия описаны чётко. Обе страницы должны согласиться на переход правилом @view-transition. Обе должны быть на одном источнике (origin): с одинаковыми протоколом, доменом и портом, поэтому переход с company.lv на shop.company.lv не сработает. Переход запускается после клика по ссылке или кнопке «Назад», но не при вводе адреса в адресную строку, открытии закладки или перезагрузке. Если следующая страница грузится дольше четырёх секунд, переход пропускается, и страница открывается обычным способом.

Для базовой версии хватит нескольких строк CSS:

@media (prefers-reduced-motion:
       no-preference) {
  @view-transition { navigation: auto; }
}
.project-image {
  view-transition-name: project-128;
}

Первые три строки включают переходы на всём сайте для тех, кто не просил устройство уменьшить движение. Четвёртая даёт изображению имя. Оно должно быть уникальным на странице: MDN предупреждает, что при двух элементах с одинаковым именем браузер пропускает переход. Поэтому в списке в имени каждой карточки есть номер проекта, а на странице проекта у главного изображения то же имя. В теме WordPress его выводят из ID записи.

Для переходов внутри одной страницы, например при переключении вкладок или фильтрации списка, есть второй вариант на JavaScript – document.startViewTransition(). Он стал Baseline 14.10.2025, когда его добавил Firefox 144, то есть теперь работает во всех основных браузерах. У переходов между страницами есть ещё события pageswap (на старой странице) и pagereveal (на новой). С ними несколькими строками JavaScript можно выбрать анимацию по направлению, вперёд или назад, или дать имя только той карточке, на которую нажали.

Какие браузеры поддерживают переходы в 2026 году

• Chrome и Edge: переходы между страницами с версии 126, события pageswap и pagereveal с версии 124.
• Safari: с версии 18.2 на компьютере и iPhone. WebKit называет это простым способом анимировать переход между страницами.
• Firefox: переходы внутри страницы с версии 144. Переходов между страницами в стабильной версии 159 пока нет, и MDN по-прежнему помечает @view-transition как «Limited availability».

В Interop 2026, о котором крупнейшие разработчики браузеров объявили 12.02.2026, переходы между страницами включены как новое направление. Mozilla описывает их как переходы между документами, работающие без JavaScript. По нашему мнению, поддержка в Firefox вероятна, но дата не объявлена, поэтому сайт должен хорошо работать и без перехода.

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

Где переходы помогают понять, где вы находитесь

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

• Портфолио. Изображение карточки проекта превращается в главное изображение страницы проекта. По кнопке «Назад» изображение возвращается в список на то же место, и посетитель видит, какой проект уже посмотрел.
• Категория и товар. Фото товара из категории становится главным изображением на странице товара, а название и цена остаются видимыми во время перехода. На маленьком экране телефона это помогает не путать похожие товары.
• Блог. Обложка и заголовок статьи переходят из списка в верхнюю часть статьи. У шапки и меню своё имя, поэтому они остаются на месте, а меняется только содержимое.

По нашему опыту, хватает одного-двух движущихся элементов и анимации длиной 250-400 мс. Плагин View Transitions для WordPress от команды WordPress Performance по умолчанию растворяет страницу за 400 мс. Если двигается весь экран и анимация длится секунду, сайт кажется медленнее, чем есть.

Где переходы не ставить или ставить осторожно

• Формы и заявки. После отправки формы человеку нужно сразу увидеть, что заявка получена или в каком поле ошибка. Анимация здесь ничего не объясняет, поэтому странице подтверждения переход не нужен.
• Корзина и оформление заказа. На шаге покупки важнее всего скорость. Страница банка или платёжной системы находится на другом домене, так что перехода там не будет в любом случае. Если вы используете предварительную загрузку (о ней в следующем разделе), исключите из неё корзину, оформление заказа, выход из аккаунта и ссылки «Добавить в корзину».
• Медленные страницы. Переход не скрывает медленную страницу. Если следующая страница грузится дольше четырёх секунд, Chrome переход пропускает, а если сайт тормозит после кликов, сначала нужно заняться INP, подробнее в статье Сайт загружается быстро, но кажется медленным: что такое INP.
• Много именованных элементов. Для каждого элемента с именем браузер делает отдельный снимок. Если одновременно двигаются десятки крупных изображений, на телефоне среднего класса анимация может дёргаться.
• Задержка первой отрисовки. Chrome позволяет с помощью <link rel="expect" blocking="render"> задержать первую отрисовку новой страницы, пока не появится нужный элемент. Документация Chrome советует применять это редко и сначала измерить Core Web Vitals, потому что это может задержать LCP.

Переходы и предварительная загрузка следующей страницы

Переход выглядит лучше всего, когда следующая страница готова почти сразу. Этого можно добиться с Speculation Rules: браузер заранее скачивает следующую страницу (prefetch) или даже полностью готовит её в фоне (prerender) до клика. В руководстве Chrome по переходам между страницами это рекомендуется именно для этой цели.

WordPress с версии 6.8 (апрель 2025 года) делает часть этой работы сам: для незалогиненных посетителей страницы заранее скачиваются в осторожном режиме (conservative), который начинает загрузку в момент нажатия кнопки мыши или касания ссылки. Адреса с параметрами запроса пропускаются. Полную подготовку в фоне можно включить для отдельных ссылок, например только для страниц проектов:

<script type="speculationrules">
{"prerender": [{
  "where": {
    "href_matches": "/projekty/*"
  },
  "eagerness": "moderate"
}]}
</script>

С moderate на компьютере подготовка начинается, если курсор задерживается на ссылке примерно 200 мс, на телефоне браузер ориентируется на то, какие ссылки видны на экране. В этом режиме одновременно готовится не больше двух страниц. Speculation Rules поддерживают Chrome и Edge, в других браузерах это пока не включено по умолчанию, и там страница просто загружается обычным образом.

Проверить нужно две вещи. Во-первых, аналитику: Google Analytics ждёт, пока подготовленная страница действительно откроется, но другие инструменты могут считать страницы, которые никто не видел. Во-вторых, не готовьте заранее ссылки, которые что-то меняют, например выход из аккаунта или добавление товара в корзину.

Бережное отношение к движению

У части людей сильное движение на экране вызывает головокружение или тошноту. В телефоне и компьютере есть настройка уменьшения движения: на iPhone и Mac она называется «Reduce Motion» («Уменьшение движения»), на Android «Remove animations», в Windows «Animation effects». Страница видит её как prefers-reduced-motion: reduce. В коде выше переход включается, только если эта настройка выключена. Можно также оставить короткое растворение без движения. Плагин View Transitions для WordPress учитывает эту настройку с версии 1.1.

Критерий WCAG 2.2 2.3.3 об анимации при взаимодействии относится к уровню AAA, поэтому требуемый Европейским актом о доступности уровень AA прямо его не требует. По нашему мнению, соблюдать его всё равно стоит, ведь это одно CSS-правило. Подробнее о требованиях доступности в статье Европейский акт о доступности: к кому он уже относится в Латвии.

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

Пример: портфолио столяра-мебельщика в Сигулде

Допустим, у столяра из Сигулды, который делает кухни, шкафы и лестницы на заказ, есть сайт на WordPress с 40 проектами в портфолио. Большинство посетителей приходят из Google или Instagram на один конкретный проект, смотрят его и уходят: в среднем 2,1 страницы за визит. При нажатии на карточку экран на мгновение становится белым, страница проекта открывается с другим изображением сверху, и на телефоне человек не всегда понимает, что открыл ту самую кухню, которую видел в списке.

Изменения заняли около 8 рабочих часов:

• в оба шаблона, список портфолио и страницу проекта, добавлено правило @view-transition внутри проверки настройки движения;
• изображению карточки и главному изображению проекта дано имя project- с ID записи, у шапки своё имя, чтобы она оставалась на месте;
• переход изображения длится 300 мс, текст только растворяется;
• Speculation Rules с moderate готовят только страницы проектов, форма и страница контактов исключены;
• проверено в Chrome на компьютере и Android, в Safari на iPhone, в Firefox (страница открывается без анимации и без ошибок) и с включённым уменьшением движения.

Если сравнить шесть недель до и после изменений, INP на телефонах остаётся 140 мс в 75-м процентиле, CLS остаётся 0,03, потому что переход не сдвигает раскладку. Число просмотренных страниц за визит у пользователей Chrome и Safari растёт с 2,1 до 3,4. У пользователей Firefox, которые перехода не видят, оно меняется с 2,0 на 2,2. Это примерная контрольная группа, а не научный тест, потому что пользователей Firefox мало, но она помогает отделить влияние перехода от сезона.

Как проверить переходы между страницами на своём сайте

1. Chrome (2 мин). Откройте список, нажмите на карточку, затем кнопку «Назад». Переход должен работать в обе стороны, а изображение возвращаться на то же место в списке.
2. Замедление анимации (5 мин). В Chrome DevTools откройте панель Animations и установите скорость 10 %. В замедленном движении видно, летит ли изображение в правильное место и не прыгает ли текст. Если перехода нет совсем, ищите в консоли ошибку о двух элементах с одним именем.
3. Уменьшение движения (2 мин). На вкладке Rendering в DevTools в пункте «Emulate CSS media feature prefers-reduced-motion» выберите reduce. Переход должен исчезнуть или стать коротким растворением.
4. Safari и Firefox (5 мин). На iPhone с iOS 18.2 или новее переход должен работать как в Chrome. В Firefox страница должна открываться обычно, без ошибок в консоли.
5. Скорость (10 мин). До и после изменений запишите LCP, INP и CLS в PageSpeed Insights или Search Console. Полевые данные охватывают 28 дней, поэтому полное сравнение будет через месяц.
6. Предварительная загрузка (5 мин). Если вы используете Speculation Rules, в DevTools на вкладке Application откройте раздел Speculative loads и проверьте, какие страницы готовятся. Корзины, оформления заказа и форм там быть не должно.

Что сделать на этой неделе

• Выберите один список (портфолио, категорию или блог), где переход поможет ориентироваться.
• Проверьте, что список и открываемая страница на одном домене и одном протоколе.
• Решите, какой элемент должен переходить: обычно это изображение, реже заголовок.
• Поместите правило перехода в проверку prefers-reduced-motion.
• Запишите INP, CLS и LCP до изменений, чтобы через месяц было с чем сравнить.
• Если используете предварительную загрузку, исключите из неё корзину, оформление заказа, формы и выход из аккаунта.

Часто задаваемые вопросы

Переходы между страницами на новом или существующем сайте

В веб-дизайне мы отмечаем в Figma, какой элемент из списка переходит на открываемую страницу и сколько длится движение. При разработке проверяем то же самое в Chrome, Safari и Firefox, на телефоне с включённым уменьшением движения и с измерением INP и CLS. Сайт компании готов за 2-3 недели. На существующий сайт WordPress переход в портфолио или каталоге обычно можно добавить без переделки, если тема не грузит тяжёлые скрипты. Подробнее на страницах Веб-дизайн и Разработка сайтов. Заполните форму и добавьте адрес страницы портфолио или категории: в ответе укажем, какие элементы на ней можно связать переходом и позволяет ли это скорость страницы. Или звоните +371 25 640 062.

Источники

• Chrome for Developers: Cross-document view transitions for multi-page applications
• MDN: @view-transition
• MDN: Using the View Transition API
• web.dev: Same-document view transitions are now Baseline Newly available (16.10.2025)
• web.dev: Interop 2026 (12.02.2026)
• Mozilla Hacks: Launching Interop 2026
• wpt.fyi: результаты Interop 2026
• WebKit: WebKit Features in Safari 18.2 (09.12.2024)
• MDN: Firefox 159 release notes for developers (27.10.2026)
• Can I use: Cross-document view transitions
• Chrome for Developers: Prerender pages in Chrome for instant page navigations
• Make WordPress Core: Speculative Loading in 6.8
• WordPress.org: плагин View Transitions (WordPress Performance Team)
• WordPress Trac #64471: Add cross-document View Transitions on the frontend
• W3C: WCAG 2.2 Understanding 2.3.3 Animation from Interactions