Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
React Labs: View Transitions, Activity, и другое
В React Labs представили два новых экспериментальных API: View Transitions и Activity. Подробнее о каждой из них:
View Transitions предназначен для анимации переходов в приложении. С ее помощью можно декларативно объявить, что анимировать, когда и как. Пример:
// «Что» анимировать
<ViewTransition>
<div>animate me</div>
</ViewTransition>
Чтобы определить «когда» анимировать, можно использовать один из трех триггеров: startTransition, useDeferredValue или Suspense.
Для стилизации анимации используйте CSS:
// «Как» анимировать
::view-transition-old(*) {
animation: 300ms ease-out fade-out;
}
::view-transition-new(*) {
animation: 300ms ease-in fade-in;
}
Также есть возможность указывать причину анимации через API addTransitionType, пример:
function navigate(url) {
startTransition(() => {
addTransitionType('nav-forward');
go(url);
});
}
function navigateBack(url) {
startTransition(() => {
addTransitionType('nav-back');
go(url);
});
}
<ViewTransition
name="nav"
share={{
'nav-forward': 'slide-forward',
'nav-back': 'slide-back',
}}>
{heading}
</ViewTransition>
::view-transition-old(.slide-forward) {
animation: ...
}
::view-transition-new(.slide-forward) {
animation: ...
}
Activity это новое API, которое позволяет визуально скрывать компонент с UI, снижать его приоритет при рендере, при этом сохраняя его стейт. Использование этого API дешевле в плане производительности по сравнению с размонтированием или скрытием через CSS. Пример компонента <Activity>:
<Activity mode={isVisible ? 'visible' : 'hidden'}>
<Page />
</Activity>
Когда у Activity мод 'visible', то компонент рендерится как обычно, а когда 'hidden', то размонтируется, но сохранит стейт и продолжит рендерится с более низким приоритетом чем видимые компоненты.
Acitivity и View Transition можно использовать вместе, пример:
<ViewTransition>
<Activity mode={url === '/' ? 'visible' : 'hidden'}>
<Home />
</Activity>
<Activity mode={url === '/details/1' ? 'visible' : 'hidden'}>
<Details id={id} />
</Activity>
<ViewTransition>
https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more
24 · 2.4K ·