Что такое View Transitions в Astro и как их включить?

Question

Accepted Answer

Что такое View Transitions

View Transitions — стандартный браузерный API (Chrome 111+, поддержан через полифил в остальных), позволяющий анимировать переход между двумя состояниями DOM без полной перезагрузки страницы. В Astro это реализовано поверх стандартного API с добавлением маршрутизации на стороне клиента: при клике по ссылке Astro перехватывает навигацию, загружает новую страницу через fetch и применяет CSS-анимацию перехода между старым и новым DOM-деревом.

Включение View Transitions

Достаточно импортировать компонент ViewTransitions и поместить его в базового layout:

---
// src/layouts/BaseLayout.astro
import { ViewTransitions } from 'astro:transitions';
---

  
    
    Мой сайт

После этого все навигации между страницами, использующими этот layout, становятся анимированными. По умолчанию применяется анимация fade.

Именованные переходы с transition:name

Директива transition:name позволяет браузеру плавно «перелетать» конкретный элемент с одной страницы на другую — это называется shared element transition:

---
// src/pages/index.astro
const posts = await getCollection('blog');
---
{posts.map(post => (
  
    
    {post.data.title}
  
))}

---
// src/pages/blog/[slug].astro
const { post } = Astro.props;
---

{post.data.title}

Управление анимацией: transition:animate

Директива transition:animate задаёт тип анимации для элемента или всей страницы:

import { slide, fade, none } from 'astro:transitions';


>
  



>
  ...

События жизненного цикла

Astro генерирует события на document, которые можно слушать для выполнения JS-логики при переходах:

// src/scripts/analytics.js
document.addEventListener('astro:page-load', () => {
  // Вызывается после каждого перехода и при первой загрузке
  console.log('Страница загружена:', window.location.pathname);
  initAnalytics();
});

document.addEventListener('astro:before-preparation', (event) => {
  // event.from — текущий URL, event.to — целевой URL
  // Можно отменить переход: event.preventDefault()
});

document.addEventListener('astro:after-swap', () => {
  // Новый DOM уже вставлен, но анимация ещё идёт
  restoreFocusState();
});

Директива transition:persist

Элементы с transition:persist сохраняются между переходами без пересоздания — полезно для аудиоплееров, видео, состояния форм:

Подводные камни

View Transitions поддерживаются нативно только в Chromium-браузерах; Firefox и Safari используют полифил Astro, который работает через fade без CSS-анимаций браузера — визуальный результат отличается.
transition:name должен быть уникальным на каждой странице в каждый момент времени — дублирующиеся имена приводят к непредсказуемой анимации или её отсутствию.
Скрипты, вставленные через обычные

Что такое View Transitions в Astro и как их включить?