Transitions

Chakra UI предоставляет мощный и гибкий механизм работы с анимациями и переходами компонентов. Основой для реализации визуальных эффектов являются свойства transition, transitionProperty, transitionDuration, transitionTimingFunction и transitionDelay, а также встроенные компоненты, специально предназначенные для анимации, такие как Collapse, Fade, ScaleFade и Slide.

Свойство `transition`

Свойство transition объединяет несколько аспектов CSS-перехода в одну строку. В Chakra UI оно может задаваться как строкой, так и объектом с отдельными параметрами. Пример:

<Box
  bg="teal.500"
  w="200px"
  h="200px"
  transition="all 0.3s ease-in-out"
  _hover={{ bg: "teal.300", transform: "scale(1.05)" }}
/>

all — задаёт, что переход будет применяться ко всем изменяемым свойствам.
0.3s — длительность перехода.
ease-in-out — функция временной кривой, определяющая скорость анимации на протяжении всего перехода.

Chakra UI также позволяет использовать объектную запись для более читаемого кода:

<Box
  bg="blue.500"
  w="100px"
  h="100px"
  transition={{
    property: "transform, background-color",
    duration: "0.2s",
    timingFunction: "ease-in-out",
  }}
  _hover={{ transform: "rotate(10deg)", bg: "blue.300" }}
/>

Компоненты для анимаций

`Collapse`

Компонент Collapse анимирует вертикальное сворачивание или разворачивание содержимого. Основные свойства:

in — boolean, управляет состоянием отображения.
animateOpacity — если true, плавно меняет прозрачность вместе с высотой.
startingHeight — начальная высота перед разворачиванием.

Пример:

<Collapse in={showContent} animateOpacity>
  <Box p="4" bg="gray.100">
    Контент, который разворачивается
  </Box>
</Collapse>

`Fade`

Fade управляет появлением и исчезновением компонента через прозрачность. Свойства:

in — true для появления, false для скрытия.
unmountOnExit — если true, компонент удаляется из DOM при скрытии.

<Fade in={isVisible}>
  <Box p="4" bg="pink.200">Плавное появление</Box>
</Fade>

`ScaleFade`

Объединяет эффект изменения масштаба и прозрачности, создавая ощущение “появления с увеличением”. Основные свойства:

initialScale — стартовый коэффициент масштаба.
in — контролирует состояние отображения.

<ScaleFade initialScale={0.9} in={showModal}>
  <Box p="6" bg="green.200" rounded="md">Модальное окно</Box>
</ScaleFade>

`Slide` и `SlideFade`

Компоненты для появления сдвигом из определённого направления.

direction — направление сдвига: "top" | "bottom" | "left" | "right".
in — состояние появления.

Пример:

<Slide direction="bottom" in={isOpen} style={{ zIndex: 10 }}>
  <Box p="4" bg="purple.300">Сдвигающийся снизу блок</Box>
</Slide>

SlideFade комбинирует сдвиг и плавное проявление через прозрачность.

Использование переходов с псевдосостояниями

Chakra UI позволяет легко добавлять переходы для псевдосостояний _hover, _focus, _active:

<Button
  bg="orange.400"
  _hover={{ bg: "orange.500", transform: "scale(1.1)" }}
  transition="all 0.2s ease"
>
  Нажми меня
</Button>

Ключевые моменты:

Всегда указывайте transition для плавности изменений.
Используйте конкретные свойства в transitionProperty для оптимизации производительности, например "background-color, transform" вместо "all".

Анимация пользовательских свойств

Chakra UI позволяет использовать transition не только для стандартных CSS-свойств. Например, можно анимировать тени, границы, цвета текста:

<Box
  p="4"
  bg="gray.100"
  borderRadius="md"
  boxShadow="md"
  transition="box-shadow 0.3s ease, transform 0.3s ease"
  _hover={{ boxShadow: "xl", transform: "translateY(-5px)" }}
>
  Карточка с тенью
</Box>

Комбинирование нескольких переходов

Можно комбинировать эффекты с помощью нескольких компонентов анимации:

<Collapse in={show}>
  <ScaleFade initialScale={0.95} in={show}>
    <Box p="5" bg="teal.200">
      Комбинированная анимация
    </Box>
  </ScaleFade>
</Collapse>

Такой подход позволяет создавать сложные интерфейсные эффекты без внешних библиотек.

Практические советы

Для производительности использовать transform и opacity вместо изменения width/height.
Для скрытия элемента из DOM после анимации использовать unmountOnExit.
Разделять контролируемую анимацию через состояние компонента и CSS-переходы для псевдосостояний.
Придерживаться единых временных кривых и длительностей для всех переходов в интерфейсе для консистентности.

Понимание и грамотное использование transition и компонентов анимации в Chakra UI позволяет создавать интерфейсы с профессиональной плавностью, сохраняя при этом простоту кода и управляемость состояний.

Transitions

Свойство transition