View Transitions API: полный обзор

/* Этот файл подключают обе страницы: клик по ссылке становится плавным переходом */
@view-transition {
  navigation: auto;
}

/* Вся страница: старая гаснет, новая слегка поднимается */
::view-transition-old(root) {
  animation: 0.2s ease-in both fade-out;
}
::view-transition-new(root) {
  animation: 0.3s ease-out both rise-in;
}
@keyframes fade-out {
  to { opacity: 0; }
}
@keyframes rise-in {
  from { opacity: 0; translate: 0 1rem; }
}

/* Кто отключил движение в системе, получает мгновенную смену */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

<!-- Каталог: у каждой миниатюры своё имя -->
<a href="/catalog/oak-table">
  <img src="/img/oak-table.webp" alt="Дубовый стол" width="320" height="240"
       style="view-transition-name: product-a100">
</a>

<!-- Страница товара: у фото то же имя —
     браузер переносит миниатюру в большое фото -->
<img src="/img/oak-table.webp" alt="Дубовый стол" width="960" height="720"
     style="view-transition-name: product-a100">

// Каждая карточка один раз получает своё имя — браузер следит за каждой отдельно
document.querySelectorAll('.card').forEach((card, i) => {
  card.style.viewTransitionName = `card-${i}`;
});

// Фильтр каталога без перезагрузки: карточки плавно переезжают на новые места
function applyFilter(category) {
  const update = () => {
    for (const card of document.querySelectorAll('.card')) {
      card.hidden = category !== 'all' && card.dataset.category !== category;
    }
  };
  // Нет поддержки — фильтр просто работает без анимации
  if (!document.startViewTransition) {
    update();
    return;
  }
  document.startViewTransition(update);
}