view-transition-name: плавная смена карточки в SPA-каталоге

Shared element transition без тяжёлой библиотеки анимаций.

Свойство view-transition-name помечает элемент для View Transitions API — при навигации браузер морфит превью товара в hero на странице товара.

Вызывайте document.startViewTransition(() => updateDOM) при смене route.

- [view-transition-name — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name) — Именование слоёв.

- [View Transitions — web.dev](https://web.dev/articles/view-transitions) — SPA и MPA.

---

## Доступность

При prefers-reduced-motion: reduce пропускайте transition или сокращайте duration до 0.01ms.

#CSS#SPA#анимация

Читайте также