0Pricing
React Academy · 课时

布局动画与 AnimatePresence

使用 layout 属性自动为布局变化添加动画，并使用 AnimatePresence 处理挂载和卸载。

布局动画与 AnimatePresence 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

布局动画

为 motion 组件添加 layout 属性后，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 automatically

AnimatePresence

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。如果没有唯一的 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」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「布局动画与 AnimatePresence」这节课中我会学到什么？

使用 layout 属性自动为布局变化添加动画，并使用 AnimatePresence 处理挂载和卸载。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「布局动画与 AnimatePresence」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Motion 组件与基础动画
  2. 用于编排动画的变体
  3. 手势动画：悬停、点击与拖拽
  4. 布局动画与 AnimatePresence
← 返回 React Academy