Сорок переходов между страницами
Сорок плавных переходов между страницами для React: растворение, общая ось, сдвиг, наплыв, шторка, куб, карусель, переворот, круг и другие — PageTransition для маршрутов и шагов, те же пресеты на View Transitions и лёгкие варианты для машин без GPU. Десять пресетов бесплатны в valyro-ui, ещё тридцать — в Pro.
Спокойные
- Fade (
fade) — Простое растворение: вкладки, фильтры, всё без направления - Fade through (
fade-through) — Уход, затем появление с лёгким приближением: несвязанные разделы - Shared axis X (
shared-x) — Короткий сдвиг вбок: шаги сценария, вперёд и назад - Shared axis Y (
shared-y) — Короткий сдвиг по вертикали: ленты и списки страниц - Shared axis Z (
shared-z) — Вглубь и обратно: из списка в подробности - Blur (
blur, Pro) — Сквозь мягкое размытие: медиа, галереи, онбординг - Rise (
rise) — Новая страница чуть поднимается, старая гаснет: надёжный выбор для большинства приложений - Dip (
dip, Pro) — Через фон, как затемнение в кино: главы, режимы
Пространственные
- Slide (
slide) — Обе страницы проходят всю ширину: карусели и листалки - Slide up (
slide-up) — Целая страница вверх или вниз: истории, вертикальные листалки - Cover (
cover) — Новая страница наезжает на старую, как навигация iOS - Uncover (
uncover, Pro) — Старая страница уезжает и открывает новую под собой - Sheet (
sheet) — Поднимается над старой страницей, та отступает: модальные экраны - Zoom (
zoom, Pro) — Сквозь старую страницу в новую: дашборды, карты - Pop (
pop, Pro) — Выпрыгивает с лёгким отскоком: игривые приложения, экраны успеха - Scale down (
scale-down, Pro) — Наезжает на старую страницу, та уменьшается: переход вглубь - Drop (
drop, Pro) — Падает сверху и приземляется с отскоком: уведомления, поздравления - Elastic (
elastic, Pro) — Полный сдвиг на пружине: экраны со свайпом, галереи - Skew (
skew, Pro) — Въезжает с наклоном и выпрямляется: энергичные бренды, промо - Swirl (
swirl, Pro) — Поворачивается и вырастает на место: игривые появления, игры - Arc (
arc, Pro) — Обе страницы едут по ободу колеса: крутилки, пошаговая настройка - Fall (
fall, Pro) — Старая страница срывается с угла и падает: закрытие, удаление - Newspaper (
newspaper, Pro) — Улетает с вращением, следующая влетает так же: срочные новости, ретро
3D
- Flip (
flip, Pro) — Переворачивается как карточка: лицо и оборот, вход и регистрация - Flip X (
flip-x, Pro) — Переворачивается сверху вниз: карточки, ответ на вопрос - Cube (
cube, Pro) — Поворот граней куба: онбординг, разделы - Cube Y (
cube-y, Pro) — Грани куба с поворотом вверх: вертикальные ленты, уровни - Swing (
swing, Pro) — Открывается на петле, как дверь: меню, боковые экраны - Tilt (
tilt, Pro) — Старая страница отклоняется, новая поднимается: секции лендинга - Carousel (
carousel, Pro) — Страницы на вращающемся барабане: галереи, витрины товаров - Room (
room, Pro) — Стены комнаты поворачиваются вокруг вас: туры, пространства - Doors (
doors, Pro) — Уходит на одной петле, следующая входит на другой: меню, настройки - Depth slide (
depth-slide, Pro) — Обе страницы отступают, проезжают и выходят вперёд: дашборды, рабочие пространства
Маски
- Circle (
circle, Pro) — Растёт из точки клика: смена темы, главное действие - Wipe (
wipe, Pro) — Ровный край проходит по экрану: до и после, хронология - Wipe up (
wipe-up, Pro) — Край проходит снизу вверх: результаты, счёт - Split (
split, Pro) — Раскрывается от центра, как створки: анонсы, запуски - Shutter (
shutter, Pro) — Раскрывается от середины вверх и вниз: обложки, главные экраны - Diagonal (
diagonal, Pro) — Косой край проходит по экрану: спорт, журналы - Diamond (
diamond, Pro) — Ромб раскрывается от центра: запуски, открытие доступа