アニメーションを連携するVariants
名前付きvariant objectsを定義し、親子component treeに伝播させます。
「アニメーションを連携するVariants」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
Variants とは
Variants はオブジェクトとして定義する名前付きのアニメーション状態です。インライン値の代わりに、コンポーネントから'hidden'や'visible'のようなバリアント名を参照します。親コンポーネントから子コンポーネントを自動的にオーケストレーションすることもできます。
Variants の定義
名前付きの状態を持つ variants オブジェクトを作成します。それをモーションコンポーネントのvariants prop に渡してください。
const cardVariants = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0 },
};
<motion.div
variants={cardVariants}
initial="hidden"
animate="visible"
transition={{ duration: 0.4 }}
/>子要素の段階的なアニメーション
親の transition で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>Variant の伝播
親の variant 状態が変わると、同じバリアント名を共有するすべての子要素も自動的にアニメーションします。各子要素に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 }}
/>Variant ごとのカスタム Transition
バリアント内に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 Variant
variants オブジェクトに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>ネストした Variant の上書き
必要に応じて、子要素は独自のinitialまたはanimate props で継承したバリアント状態を上書きし、親によるオーケストレーションから外れることができます。
命令型 Variant 制御のための 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,
},
},
};再利用可能な Variant ライブラリ
variants を共有ファイルに定義し、必要な場所でインポートすると、アプリ全体でアニメーション設定を一貫させられます。
// 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 の transition オプションはどれですか？
まとめ
Variants はオブジェクトとして定義する名前付きの状態です。親の transition にstaggerChildrenを設定すると、子要素全体にアニメーションを自動的に連鎖させられます。命令型の制御にはuseAnimation()を使い、アンマウント時のアニメーションには exit variants とAnimatePresenceを組み合わせます。
よくある質問
「アニメーションを連携するVariants」レッスンは無料ですか？
はい。「アニメーションを連携するVariants」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「アニメーションを連携するVariants」で何を学びますか？
名前付きvariant objectsを定義し、親子component treeに伝播させます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「アニメーションを連携するVariants」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Motion Componentsと基本アニメーション
- アニメーションを連携するVariants
- ジェスチャーアニメーション：Hover、Tap、Drag
- レイアウトアニメーションとAnimatePresence