0Pricing
React Academy · レッスン

レイアウトアニメーションとAnimatePresence

layout propでレイアウトの変化を自動的にアニメーションさせ、AnimatePresenceでmount/unmountを扱います。

「レイアウトアニメーションとAnimatePresence」はCoddyKit上の無料React Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

レイアウトアニメーション

モーションコンポーネントにlayout prop を追加すると、状態や DOM の変更によって発生するレイアウトの変更（サイズ、位置）が Framer Motion によって自動的にアニメーションされます。手動で位置を指定する必要はありません。

<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
  {/* Width animates smoothly when isExpanded changes */}
</motion.div>

Layout prop の値

layout prop には、true（レイアウト全体）、'position'（位置のみ）、'size'（サイズのみ）を指定して、アニメーション対象を制限できます。

<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size">     {/* only width/height animate */}

共有要素のトランジション用 layoutId

2 つの要素に同じ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 prop は必須

AnimatePresence では、各子要素に安定したkeyが必要です。一意の key がないと、React は要素がアンマウントされたのか更新されたのかを検出できません。

// Animating between pages:
<AnimatePresence mode="wait">
  <motion.div key={pathname} ... />
</AnimatePresence>

AnimatePresence の mode

modeは、退出する要素と入ってくる要素がどのように重なるかを制御します。'wait'は exit が完了するまで enter アニメーションを遅延させます。'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 によるリストのアニメーション

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は、複数の独立したモーションコンポーネント間でレイアウトアニメーションを調整し、1 つのグループとして一緒にアニメーションさせます。

import { LayoutGroup } from 'framer-motion';

<LayoutGroup>
  <Sidebar />
  <MainContent />
  {/* Both animate layout changes together */}
</LayoutGroup>

レイアウトの歪みの修正

レイアウトアニメーションでは、境界線、シャドウ、border-radius が歪むことがあります。layoutDependency prop または 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はツリー内の2つの要素間を変形させます。AnimatePresenceは終了アニメーションを有効にします。子要素には常に安定したkey propsを指定し、ページ遷移にはmode='wait'を選択してください。

よくある質問

「レイアウトアニメーションとAnimatePresence」レッスンは無料ですか？

はい。「レイアウトアニメーションとAnimatePresence」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「レイアウトアニメーションとAnimatePresence」で何を学びますか？

layout propでレイアウトの変化を自動的にアニメーションさせ、AnimatePresenceでmount/unmountを扱います。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「レイアウトアニメーションとAnimatePresence」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Motion Componentsと基本アニメーション
  2. アニメーションを連携するVariants
  3. ジェスチャーアニメーション：Hover、Tap、Drag
  4. レイアウトアニメーションとAnimatePresence
← React Academyに戻る