0Pricing
React Academy · Урок

Варианты для согласованных анимаций

Определяйте именованные объекты вариантов и передавайте их по деревьям родительских и дочерних компонентов.

«Варианты для согласованных анимаций» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое Variants

Variants — это именованные состояния анимации, заданные в виде объектов. Вместо встроенных значений компоненты ссылаются на имена вариантов, например 'hidden' и 'visible'. Родительские компоненты могут автоматически управлять дочерними.

Определение Variants

Создайте объект вариантов с именованными состояниями. Передайте его в проп variants компонента motion.

const cardVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0 },
};

<motion.div
  variants={cardVariants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 0.4 }}
/>

Последовательная анимация дочерних элементов

Используйте staggerChildren в переходе родительского элемента, чтобы анимировать дочерние элементы по очереди с задержкой между ними.

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: { opacity: 1, x: 0 },
};

<motion.ul variants={containerVariants} initial="hidden" animate="visible">
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
  ))}
</motion.ul>

Распространение вариантов

Когда состояние варианта родительского элемента изменяется, все дочерние элементы с таким же именем варианта автоматически анимируются — нет необходимости передавать animate каждому дочернему элементу.

// Children inherit animate="visible" from the parent automatically
const parent = { hidden: {}, visible: { transition: { staggerChildren: 0.05 } } };
const child = { hidden: { opacity: 0 }, visible: { opacity: 1 } };

<motion.div variants={parent} initial="hidden" animate="visible">
  <motion.p variants={child}>First</motion.p>
  <motion.p variants={child}>Second</motion.p>
  <motion.p variants={child}>Third</motion.p>
</motion.div>

Переключение между состояниями

Управляйте активным вариантом с помощью переменной состояния. Framer Motion плавно переключается между именованными состояниями.

const [isOpen, setIsOpen] = useState(false);

const panelVariants = {
  closed: { height: 0, opacity: 0 },
  open: { height: 'auto', opacity: 1 },
};

<motion.div
  variants={panelVariants}
  animate={isOpen ? 'open' : 'closed'}
  initial="closed"
  transition={{ duration: 0.3 }}
/>

Пользовательский переход для каждого варианта

Добавьте ключ transition внутрь варианта, чтобы настроить время только для этого состояния.

const menuVariants = {
  closed: {
    scaleY: 0,
    transition: { duration: 0.2, ease: 'easeIn' },
  },
  open: {
    scaleY: 1,
    transition: { duration: 0.3, ease: 'easeOut', staggerChildren: 0.05 },
  },
};

Варианты выхода с AnimatePresence

Добавьте ключ exit в объект вариантов и оберните компонент в AnimatePresence, чтобы анимировать его размонтирование.

const pageVariants = {
  initial: { opacity: 0, x: '100%' },
  enter: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: '-100%' },
};

<AnimatePresence mode="wait">
  <motion.div
    key={router.pathname}
    variants={pageVariants}
    initial="initial"
    animate="enter"
    exit="exit"
    transition={{ duration: 0.3 }}
  />
</AnimatePresence>

Переопределение вложенных вариантов

Дочерние элементы могут переопределить унаследованное состояние варианта собственными пропсами initial или animate, при необходимости выходя из управления родительского элемента.

useAnimation для императивного управления вариантами

useAnimation() возвращает объект управления анимацией. Вызовите controls.start('variantName') программно, чтобы активировать варианты.

const controls = useAnimation();

async function sequence() {
  await controls.start('wiggle');
  await controls.start('bounce');
}

<motion.div animate={controls} variants={{ wiggle: { rotate: 10 }, bounce: { y: -20 } }} />

Параметры оркестрации

Помимо staggerChildren, можно использовать when ('beforeChildren' | 'afterChildren'), чтобы задавать последовательность анимаций родительского и дочерних элементов.

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      when: 'beforeChildren', // parent fades in before stagger starts
      staggerChildren: 0.1,
    },
  },
};

Библиотеки повторно используемых вариантов

Определяйте варианты в общем файле и импортируйте их там, где это необходимо, чтобы конфигурации анимации оставались единообразными во всём приложении.

// lib/variants.ts
export const fadeIn = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
export const slideUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };

// Usage:
<motion.div variants={slideUp} initial="hidden" animate="visible" />

Быстрая проверка

Какой параметр перехода Framer Motion последовательно задерживает анимацию дочерних элементов?

Итоги

Variants — это именованные состояния, заданные в виде объектов. Установите staggerChildren в переходе родительского элемента, чтобы автоматически каскадировать анимации на дочерние элементы. Используйте useAnimation() для императивного управления, а AnimatePresence с вариантами выхода — для анимаций при размонтировании.

Часто задаваемые вопросы

Урок «Варианты для согласованных анимаций» бесплатный?

Да — полный текст урока «Варианты для согласованных анимаций» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Варианты для согласованных анимаций»?

Определяйте именованные объекты вариантов и передавайте их по деревьям родительских и дочерних компонентов. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Варианты для согласованных анимаций»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Компоненты Motion и базовые анимации
  2. Варианты для согласованных анимаций
  3. Анимации жестов: наведение, нажатие и перетаскивание
  4. Анимации макета и AnimatePresence
← Назад к React Academy