Анимации макета и AnimatePresence
Автоматически анимируйте изменения макета с помощью свойства layout и монтирование или размонтирование с помощью AnimatePresence.
«Анимации макета и AnimatePresence» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Анимации макета
Добавьте проп layout компоненту motion, и Framer Motion автоматически анимирует любые изменения макета (размер, положение), вызванные состоянием или мутациями DOM, — ручное позиционирование не требуется.
<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
{/* Width animates smoothly when isExpanded changes */}
</motion.div>Значения пропа layout
Проп layout принимает true (весь макет), 'position' (только положение) или 'size' (только размер), чтобы ограничить анимируемые свойства.
<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size"> {/* only width/height animate */}layoutId для переходов общих элементов
Задайте двум элементам одинаковый layoutId, и Framer Motion анимирует переход между ними так, будто это один и тот же элемент, даже если они находятся в разных компонентах.
// Thumbnail in list:
<motion.img layoutId={`photo-${id}`} src={src} className="thumbnail" />
// Full-screen view:
<motion.img layoutId={`photo-${id}`} src={src} className="fullscreen" />
// Framer Motion morphs one into the other automaticallyAnimatePresence
AnimatePresence включает анимации exit. Без него размонтируемые компоненты исчезают мгновенно. Оберните в него условный рендеринг, чтобы анимировать размонтирование.
import { AnimatePresence, motion } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="notification"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
/>
)}
</AnimatePresence>Проп key обязателен
AnimatePresence требует, чтобы у каждого дочернего элемента был стабильный key. Без уникального ключа React не может определить, когда элементы размонтируются, а когда обновятся.
// Animating between pages:
<AnimatePresence mode="wait">
<motion.div key={pathname} ... />
</AnimatePresence>Режим AnimatePresence
mode управляет перекрытием исчезающих и появляющихся элементов. 'wait' откладывает анимацию появления до завершения выхода. 'sync' (по умолчанию) запускает обе анимации одновременно.
// Page transitions — wait for old page to exit:
<AnimatePresence mode="wait">
<motion.main key={pathname} ... />
</AnimatePresence>
// Toast stack — new toasts appear while old ones exit:
<AnimatePresence mode="sync">
{toasts.map(t => <motion.div key={t.id} ... />)}
</AnimatePresence>Анимация списков с помощью макета
Объединяйте layout и AnimatePresence, чтобы анимировать изменение порядка и удаление элементов списка.
<motion.ul>
<AnimatePresence>
{items.map(item => (
<motion.li
key={item.id}
layout
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
>
{item.name}
</motion.li>
))}
</AnimatePresence>
</motion.ul>LayoutGroup
LayoutGroup координирует анимации макета нескольких независимых компонентов motion, чтобы они анимировались вместе как единая группа.
import { LayoutGroup } from 'framer-motion';
<LayoutGroup>
<Sidebar />
<MainContent />
{/* Both animate layout changes together */}
</LayoutGroup>Исправление искажений макета
Анимации макета могут искажать границы, тени и радиус границы. Используйте проп layoutDependency или коррекцию масштаба CSS, чтобы исправить визуальные артефакты.
<motion.div
layout
style={{ borderRadius: 12 }}
// Framer Motion auto-corrects border-radius during scale changes
/>Шаблон перехода по общей оси
Для шагов мастера или вкладок анимируйте положение по оси X в зависимости от направления, чтобы создать осмысленную пространственную связь между экранами.
const variants = {
enter: (dir: number) => ({ x: dir > 0 ? '100%' : '-100%', opacity: 0 }),
center: { x: 0, opacity: 1 },
exit: (dir: number) => ({ x: dir < 0 ? '100%' : '-100%', opacity: 0 }),
};
<AnimatePresence custom={direction} mode="wait">
<motion.div
key={step}
custom={direction}
variants={variants}
initial="enter"
animate="center"
exit="exit"
/>
</AnimatePresence>Быстрая проверка
Какой режим AnimatePresence откладывает анимацию входа до завершения анимации выхода?
Итоги
layout автоматически анимирует изменения размера и положения. layoutId преобразует один элемент в другой в разных частях дерева. AnimatePresence включает анимации выхода — всегда задавайте дочерним элементам стабильные свойства key и выбирайте mode='wait' для переходов между страницами.
Часто задаваемые вопросы
Урок «Анимации макета и AnimatePresence» бесплатный?
Да — полный текст урока «Анимации макета и AnimatePresence» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Анимации макета и AnimatePresence»?
Автоматически анимируйте изменения макета с помощью свойства layout и монтирование или размонтирование с помощью AnimatePresence. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Анимации макета и AnimatePresence»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Компоненты Motion и базовые анимации
- Варианты для согласованных анимаций
- Анимации жестов: наведение, нажатие и перетаскивание
- Анимации макета и AnimatePresence