⚡ View Transitions — как добавить плавные анимации при смене страниц в WordPress без единой строчки кода
Когда пользователь кликает по ссылке на сайте — обычно всё исчезает и новая страница появляется внезапно. Это стандартное поведение браузеров. Но что если сделать этот процесс плавным, с красивыми анимациями появления и исчезновения контента?
Вот тут и приходит на помощь плагин View Transitions — лёгкий, бесплатный и почти магический инструмент, который добавляет анимированные переходы между страницами на WordPress-сайте с помощью нативной функции view-transition
из CSS.
🔧 Что делает плагин?
Плагин активирует поддержку CSS View Transitions API на вашем сайте. Эта технология позволяет браузеру анимировать изменения DOM при переходе на другую страницу — без "дёрганий", с плавными fade-in/fade-out или кастомными эффектами.
Примеры эффектов:
И всё это — без JavaScript, на нативных возможностях CSS!
⚙️ Как использовать?
- Установите плагин
👉 Скачать с wordpress.org - Активируйте его
Плагин сразу начинает работать — ничего настраивать не нужно. Но вы можете настроить: - При необходимости — кастомизация
Вы можете переопределить стили в своём 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 поддерживаются в:
В Safari и Firefox пока нет полной поддержки, но сайт будет работать как обычно — просто без анимаций.
⚠️ Влияние на PageSpeed
Плагин не влияет на Core Web Vitals напрямую, но может улучшить визуальное восприятие загрузки страниц. Это особенно важно для UX и удержания пользователей на сайте.
🧩 Совместимость
- С классическим и блочным редактором
- С плагинами Elementor, Oxygen, Bricks (но поведение может отличаться — протестируйте)
- С кэш-плагинами (LiteSpeed, WP Rocket)
✅ Вывод
View Transitions — отличный способ оживить сайт без лишней нагрузки. Это must-have для тех, кто хочет сделать WordPress чуть-чуть более современным и “плавным”.
Подписывайтесь на Telegram канал WP EASY