⚡ View Transitions — как добавить плавные анимации при смене страниц в WordPress без единой строчки кода

Когда пользователь кликает по ссылке на сайте — обычно всё исчезает и новая страница появляется внезапно. Это стандартное поведение браузеров. Но что если сделать этот процесс плавным, с красивыми анимациями появления и исчезновения контента?

Вот тут и приходит на помощь плагин View Transitions — лёгкий, бесплатный и почти магический инструмент, который добавляет анимированные переходы между страницами на WordPress-сайте с помощью нативной функции view-transition из CSS.

🔧 Что делает плагин?

Плагин активирует поддержку CSS View Transitions API на вашем сайте. Эта технология позволяет браузеру анимировать изменения DOM при переходе на другую страницу — без "дёрганий", с плавными fade-in/fade-out или кастомными эффектами.

Примеры эффектов:

Затухание контента (fade)
Слайд-переходы
Перелистывание блоков

И всё это — без JavaScript, на нативных возможностях CSS!

⚙️ Как использовать?

Установите плагин
👉 Скачать с wordpress.org
Активируйте его
Плагин сразу начинает работать — ничего настраивать не нужно. Но вы можете настроить:

Исключения по URL (например, отключить на админке или WooCommerce checkout)
Стиль анимации

При необходимости — кастомизация
Вы можете переопределить стили в своём CSS-файле:

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.4s ease;
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

Так же вы можете добавить через functions.php (Желательно в дочерней теме)

add_action('after_setup_theme', function() {
    add_theme_support('view-transitions', [
        'default-animation' => 'slide-from-right',
        'post-selector' => '.post',
        'global-transition-names' => [ '.site-header' => 'header' ],
        'post-transition-names' => [ '.entry-title' => 'post-title' ],
    ]);
});

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

На момент написания статьи View Transitions поддерживаются в:

Chrome (с версии 111)
Edge
Opera

В Safari и Firefox пока нет полной поддержки, но сайт будет работать как обычно — просто без анимаций.

⚠️ Влияние на PageSpeed

Плагин не влияет на Core Web Vitals напрямую, но может улучшить визуальное восприятие загрузки страниц. Это особенно важно для UX и удержания пользователей на сайте.

🧩 Совместимость

Плагин совместим:

С классическим и блочным редактором
С плагинами Elementor, Oxygen, Bricks (но поведение может отличаться — протестируйте)
С кэш-плагинами (LiteSpeed, WP Rocket)

✅ Вывод

View Transitions — отличный способ оживить сайт без лишней нагрузки. Это must-have для тех, кто хочет сделать WordPress чуть-чуть более современным и “плавным”.

Подписывайтесь на Telegram канал WP EASY