Плавные переходы между страницами через плагин View Transitions для WordPress

Опубликовано: 25 июля 2026 г. в 10:26

Источник: Web-лента этого сайта.

Представляем новый плагин от WordPress Core Performance Team: View Transitions! Этот экспериментальный плагин привносит мощь кросс-документного View Transitions API браузера на ваш WordPress-сайт, обеспечивая плавные анимированные переходы при навигации между страницами.

Что такое View Transitions?

Традиционно перемещение с одной страницы (URL) на другую в интернете всегда сопровождалось резкой «жёсткой» перезагрузкой. Хотя многим из нас это кажется совершенно естественным, ожидания пользователей радикально изменились за последние (почти) два десятилетия.

Нативные мобильные приложения с их плавной навигацией и гладкими переходами установили новую планку пользовательского опыта. Это побудило веб-разработчиков пытаться догнать этот опыт, часто прибегая к одностраничным приложениям (SPA). Хотя SPA стремятся имитировать нативную навигацию, динамически обновляя контент без полной перезагрузки страниц, это часто сопряжено с повышенной сложностью разработки и изменением структуры всего сайта — нередко в ущерб доступности или производительности.

Теперь, с появлением кросс-документных view transitions, вы можете достичь желаемого пользовательского опыта через плавные переходы в вебе без капитальной перестройки сайта. А новый плагин View Transitions делает это максимально просто в WordPress.

Как работают View Transitions в WordPress?

Как только вы активируете плагин на своём WordPress-сайте и перейдёте между несколькими страницами, вы заметите, что плагин использует мягкий эффект затухания для перехода, создавая более плавный и визуально приятный пользовательский опыт. Это поведение по умолчанию не только для плагина, но и для самого View Transitions API в браузере.

Поскольку характер и стиль переходов могут сильно зависеть от конкретной вёрстки и дизайна темы, долгосрочное видение состоит в том, чтобы темы могли opt-in и настраивать это поведение. Это реализуется через WordPress theme support API, например с помощью вызова add_theme_support( 'view-transitions' ).

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

Настройка View Transitions

На этом начальном экспериментальном этапе плагин предлагает удобный способ изучения различных конфигураций прямо в админке WordPress. Вы найдёте настройки в разделе Settings → Reading, где можно изменять поведение view transitions. Этот интерфейс предназначен в первую очередь для лёгкого экспериментирования и тестирования на раннем этапе.

Настройка через `add_theme_support()`

Чтобы быстро включить view transitions со стандартными настройками, добавьте следующий код в файл functions.php вашей темы (обычно внутри хука after_setup_theme):

function mytheme_setup(){
    add_theme_support( 'view-transitions' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Для большего контроля вы можете передать массив аргументов в add_theme_support( 'view-transitions', $args ). Вот доступные аргументы:

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

Для default-animation доступно несколько анимаций по умолчанию. Кроме того, плагин предоставляет API для регистрации дополнительных анимаций. На данный момент базовые анимации, доступные «из коробки»:

fade
slide:
- slide-from-right
- slide-from-bottom
- slide-from-left
- slide-from-top
swipe:
- swipe-from-right
- swipe-from-bottom
- swipe-from-left
- swipe-from-top
wipe:
- wipe-from-right
- wipe-from-bottom
- wipe-from-left
- wipe-from-top

Вы можете настроить любые или все поддерживаемые аргументы, передав массив в add_theme_support(). Вот пример изменения всех доступных опций:

function mytheme_custom_view_transitions_setup(){
    add_theme_support( 'view-transitions', array(
        'default-animation'       => 'wipe-from-right',
        'post-selector'           => '.wp-block-post.post, article.post, article.entry',
        'global-transition-names' => array(
            '.site-branding' => 'logo',
            '.site-header'   => 'header',
        ),
        'post-transition-names'   => array(
            '.wp-block-post-title, .entry-title'     => 'post-title',
            '.wp-post-image'                         => 'post-thumbnail',
            '.wp-block-post-content, .entry-content' => 'post-content',
            '.post-meta'                             => 'post-meta',
        ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_custom_view_transitions_setup' );

Значения по умолчанию для всех поддерживаемых аргументов основаны частично на классах, генерируемых WordPress, которые почти всегда присутствуют на сайтах, и частично на очень распространённых соглашениях. Цель в том, чтобы настройки по умолчанию хорошо работали для большинства сайтов на WordPress.

Настройка через Settings → Reading

Ограниченный поднабор того, что можно настроить через add_theme_support, доступен в разделе «View Transitions» в Settings → Reading.

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

Приоритет конфигурации

Важно помнить, что на данный момент любые настройки, сделанные через интерфейс Settings, имеют приоритет над тем, что определено в коде темы с помощью add_theme_support(). Это стоит учитывать при тестировании и изучении плагина.

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

Кросс-документные view transitions в настоящее время поддерживаются в ряде современных браузеров, включая Chrome, Edge и Safari. Для пользователей браузеров, которые ещё не поддерживают этот API, негативных последствий не будет — они просто увидят традиционные «жёсткие» переходы между страницами. Актуальную совместимость можно проверить на caniuse.com.

Источник: felix-arntz.me