Когда пользователь кликает по ссылке на сайте — обычно всё исчезает и новая страница появляется внезапно. Это стандартное поведение браузеров. Но что если сделать этот процесс плавным, с красивыми анимациями появления и исчезновения контента?
Вот тут и приходит на помощь плагин View Transitions — лёгкий, бесплатный и почти магический инструмент, который добавляет анимированные переходы между страницами на WordPress-сайте с помощью нативной функции view-transition из CSS.
🔧 Что делает плагин?
Плагин активирует поддержку CSS View Transitions API на вашем сайте. Эта технология позволяет браузеру анимировать изменения DOM при переходе на другую страницу — без "дёрганий", с плавными fade-in/fade-out или кастомными эффектами.
Примеры эффектов:
- Затухание контента (fade)
- Слайд-переходы
- Перелистывание блоков
И всё это — без JavaScript, на нативных возможностях CSS!
⚙️ Как использовать?
- Активируйте его
Плагин сразу начинает работать — ничего настраивать не нужно. Но вы можете настроить:
- Исключения по 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