Начните внедрять View Transitions на своих сайтах уже сегодня

API View Transition значительно упрощает анимацию переходов между двумя состояниями веб-страницы, улучшая пользовательский опыт. Инициировать такой переход можно двумя способами: автоматически при смене страницы с помощью CSS или вручную через JavaScript. Для автоматических переходов при нативной маршрутизации достаточно добавить следующий CSS:

@view-transition {
	navigation: auto;
}

Для одностраничных приложений (SPA) и большинства фреймворков чаще требуется ручной вызов View Transition с помощью JavaScript. Пример такого вызова:

if (document.startViewTransition) {
	document.startViewTransition(() => {
		// Здесь происходит обновление DOM
		filterItems();
	});
} else {
	filterItems(); // Fallback для браузеров без поддержки
}

При активации View Transition создает два снимка — текущего (старого) и будущего (нового) состояния. Эти снимки сравниваются по положению, размеру и вращению, после чего генерируется ключевая анимация, напоминающая технику FLIP, но с гораздо меньшими усилиями со стороны разработчика. Снимки помещаются в псевдоэлементы ::view-transition; по умолчанию создается только снимок корневого элемента, но вы можете добавить больше элементов, присвоив им уникальное имя с помощью CSS-свойства view-transition-name.

Анатомия View Transition включает в себя ::view-transition-group, ::view-transition-image-pair и ::view-transition-old / ::view-transition-new, каждый из которых выполняет свою функцию в процессе анимации. Важно помнить, что эти снимки являются неинтерактивными изображениями, поэтому их нельзя стилизовать или изменять с помощью JavaScript во время перехода. Для отладки View Transitions можно использовать панель Animations в Chrome Dev Tools, позволяющую замедлять или приостанавливать анимации.

Для более сложного управления переходами, например, при фильтрации или сортировке элементов, рекомендуется использовать "типы переходов" (types), которые задаются в JavaScript при вызове startViewTransition:

if (document.startViewTransition) {
	document.startViewTransition({
		update: () => filterItems(),
		types: ['filter']
	});
} else {
	filterItems();
}

Это позволяет применять специфичные стили анимации для различных взаимодействий, используя псевдокласс :active-view-transition-type(тип). Хорошей практикой является установка общих свойств анимации для всех псевдоэлементов View Transition. Кроме того, декларации view-transition-name рекомендуется оборачивать в медиазапрос (prefers-reduced-motion: no-preference), чтобы обеспечить доступность:

.work-item {
	@media (prefers-reduced-motion: no-preference) {
		view-transition-name: var(--vt);
	}
}

API позволяет создавать уникальные анимации для элементов, которые исчезают или появляются во время перехода, используя псевдокласс :only-child:

::view-transition-old(work-item):only-child {
	animation-name: animate-out;
	animation-duration: 0.3s;
}

Наконец, View Transition API теперь поддерживается всеми основными браузерами (начиная с Firefox 144), хотя Firefox пока поддерживает только переходы в пределах одного документа, а не между разными страницами.

Оригинал статьи: Start Implementing View Transitions on Your Websites Today