Настройка переходов и анимаций

Chakra UI предоставляет мощные возможности для создания анимаций и переходов, опираясь на систему style props и интеграцию с библиотекой Framer Motion. Для начала важно понимать, что все визуальные компоненты Chakra UI поддерживают transition свойства, позволяя плавно изменять стили при взаимодействии с элементами.

Базовое свойство для анимации — это transition. Оно может быть применено к любому компоненту 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)" }}
/>

В этом примере transition="all 0.3s ease-in-out" задаёт плавный переход для всех изменяемых стилей (bg, transform) с продолжительностью 0.3 секунды и функцией сглаживания ease-in-out.

Ключевые моменты работы с transition:

  • transitionProperty — определяет, какие CSS-свойства будут анимированы ("all", "background", "transform" и т.д.).
  • transitionDuration — задаёт длительность анимации ("0.2s", "500ms").
  • transitionTimingFunction — функция сглаживания ("ease", "linear", "ease-in-out").
  • transitionDelay — задержка перед запуском анимации ("0.1s").

Пример с раздельным указанием свойств:

<Button
  bg="blue.500"
  color="white"
  transitionProperty="background, transform"
  transitionDuration="0.4s"
  _hover={{ bg: "blue.300", transform: "translateY(-5px)" }}
>
  Нажми меня
</Button>

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

Для более сложных анимаций Chakra UI интегрируется с Framer Motion, позволяя использовать анимированные версии компонентов через motion API.

import { motion } from "framer-motion";
import { Box } from "@chakra-ui/react";

const MotionBox = motion(Box);

<MotionBox
  bg="purple.500"
  w="150px"
  h="150px"
  whileHover={{ scale: 1.2, rotate: 10 }}
  transition={{ type: "spring", stiffness: 200 }}
/>

Здесь whileHover задаёт анимацию при наведении, а transition позволяет детально настроить тип анимации, её жёсткость (stiffness) и демпфирование.

Основные типы анимаций в Framer Motion для Chakra UI:

  • whileHover — при наведении курсора.
  • whileTap — при клике или тапе.
  • animate — для анимации при монтировании или изменении состояния.
  • initial — начальное состояние анимации перед её запуском.
  • exit — анимация при удалении элемента из DOM (совместно с AnimatePresence).

Использование AnimatePresence для плавного появления и исчезновения

Для элементов, которые должны плавно исчезать или появляться, применяется компонент AnimatePresence из Framer Motion:

import { AnimatePresence, motion } from "framer-motion";
import { Box, Button } from "@chakra-ui/react";
import { useState } from "react";

const MotionBox = motion(Box);

function Example() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <>
      <Button onCl ick={() => setIsVisible(!isVisible)}>Toggle</Button>
      <AnimatePresence>
        {isVisible && (
          <MotionBox
            bg="orange.400"
            w="100px"
            h="100px"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 20 }}
            transition={{ duration: 0.5 }}
          />
        )}
      </AnimatePresence>
    </>
  );
}

В этом примере элемент плавно появляется сверху вниз и исчезает вниз, используя initial, animate и exit.

Настройка кривых переходов и времени анимации

Chakra UI поддерживает удобное задание кривых переходов и времени анимации через shorthand-пропсы:

<Box
  transition="transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
  _hover={{ transform: "scale(1.1)" }}
/>
  • Cubic-bezier позволяет создавать кастомные кривые ускорения и замедления.
  • Можно комбинировать с ease-in, ease-out, ease-in-out для стандартных эффектов.

Комбинация анимаций и темизации

Chakra UI интегрирует анимации с темами, позволяя использовать значения из темы для плавных переходов:

<Box
  bg="brand.500"
  transition="background 0.4s ease-in-out"
  _hover={{ bg: "brand.300" }}
/>

Таким образом, анимации остаются консистентными с глобальной цветовой схемой и системой дизайна приложения.

Рекомендации по производительности

  • Использовать анимации на transform и opacity вместо width/height для более плавного рендера.
  • Минимизировать количество одновременно анимируемых элементов, чтобы избежать падения FPS.
  • Применять will-change для компонентов с интенсивной анимацией:
<Box
  _hover={{ transform: "scale(1.1)" }}
  willChange="transform"
/>

Это указывает браузеру оптимизировать рендер заранее.

Заключение по настройке анимаций

Chakra UI сочетает простоту CSS-переходов с мощью Framer Motion, позволяя создавать плавные, выразительные и настраиваемые анимации. Понимание ключевых пропсов (transition, whileHover, animate, initial, exit) и правильная настройка времени и кривых переходов обеспечивает высокое качество UX при минимальных усилиях.

Оглавление