Переходы между страницами

Спроектируй переходы между страницами.

Решение №1: нужны ли вообще?

Переходы — это дополнительное время на восприятие. Прежде чем добавлять:

• ✓ Если страницы связаны логически (мастер, шаги, история)

• ✓ Если переход сообщает иерархию (детали → список)

• ✓ Если нужно сохранить shared element (карточка → её страница)

• ✗ Если переход просто "красиво" — пользователь увидит 100 раз, после 5-го раздражает

• ✗ Если переход дольше 400ms — слишком медленно

• ✗ Если страницы независимы

Типы

A. Fade (универсальный)

• Старая исчезает, новая появляется
• 200ms, мягкий ease-out
• Подходит для большинства случаев

B. Slide (для иерархии)

• Вперёд = справа налево
• Назад = слева направо
• Подходит для иерархичной навигации (как мобильные приложения)

C. Shared element (для drill-in)

• Элемент с предыдущей страницы плавно становится элементом новой
• Самый "магический" эффект
• Сложнее реализовать (View Transitions API или Framer Motion)
• Не делай везде — потеряет ценность

D. None (часто лучший выбор)

• Прямая замена контента
• Быстро, никаких эффектов
• Подходит когда страницы независимы

Технологии

View Transitions API (новый стандарт)

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
}

• Нативно браузером
• Простая интеграция в Next.js / React
• Shared elements через view-transition-name

Framer Motion / Motion

<AnimatePresence mode="wait">
  <motion.div key={pathname} initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}>
    {children}
  </motion.div>
</AnimatePresence>

• Больше контроля
• Работает везде

Принципы

1. Скорость > эффект. Долгий transition = слепое окно где юзер не может ничего делать.
2. Только один тип на сайте. Не fade на главной + slide на детали + scale на профиле.
3. Сохраняй scroll position для back-навигации.
4. Не блокируй интерактив во время перехода — пусть пользователь может нажать.
5. Reduced motion — на это вообще плевать должны иметь transitions, не показывайте.

Типичные ошибки

• ❌ Transition на каждый клик внутри одного раздела
• ❌ Transition длиннее самой загрузки страницы
• ❌ Shared element на текстовых элементах (выглядит странно)
• ❌ "Whoosh" эффект с blur и scale — выглядит дёшево
• ❌ Не работает back-button (юзер потерялся)

Тест

• Кликни 10 раз подряд между разными страницами
• На 5-м клике уже раздражает?
• Убери transition или сократи

Производительность

• При переходе SSR-страницы — браузер сам рендерит новую
• При переходе SPA — нет flash контента (preserve layout)
• Не делай heavy анимацию на низких устройствах — фолбэк на none через MediaQuery