React Academy · Pelajaran

Varian untuk Animasi Terorkestrasi

Definisikan objek varian bernama dan teruskan melalui pohon komponen induk-anak.

Pelajaran 2 dari 413 langkah

Varian untuk Animasi Terorkestrasi adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu Variants

Variants adalah keadaan animasi bernama yang didefinisikan sebagai objek. Alih-alih nilai sebaris, komponen merujuk nama variants seperti 'hidden' dan 'visible'. Komponen induk dapat mengatur komponen anak secara otomatis.

Mendefinisikan Variants

Buat objek variants dengan keadaan-keadaan bernama. Teruskan objek tersebut ke properti variants pada komponen 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 }}
/>

Komponen Anak Berjeda

Gunakan staggerChildren dalam transition milik induk untuk menganimasikan komponen anak satu per satu dengan jeda di antara setiap komponen.

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>

Pewarisan Variants

Saat keadaan variant milik induk berubah, semua komponen anak yang memiliki nama variant yang sama juga otomatis dianimasikan — Anda tidak perlu meneruskan animate ke setiap komponen anak.

// 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>

Beralih Antar-keadaan

Kontrol variant yang aktif dengan variabel keadaan. Framer Motion bertransisi dengan mulus di antara keadaan-keadaan bernama.

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 Kustom per Variant

Tambahkan kunci transition di dalam sebuah variant untuk menyesuaikan pengaturan waktu hanya bagi keadaan tersebut.

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

Variant Keluar dengan AnimatePresence

Tambahkan kunci exit ke objek variants Anda dan bungkus komponen dalam AnimatePresence untuk menganimasikannya saat dilepas dari pohon.

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>

Penggantian Variant Bertingkat

Komponen anak dapat mengganti keadaan variant yang diwarisi dengan properti initial atau animate miliknya sendiri, sehingga keluar dari pengaturan induk bila diperlukan.

useAnimation untuk Kontrol Variant Imperatif

useAnimation() mengembalikan objek kontrol animasi. Panggil controls.start('variantName') secara terprogram untuk memicu variants.

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 } }} />

Opsi Orkestrasi

Selain staggerChildren, Anda dapat menggunakan when ('beforeChildren' | 'afterChildren') untuk mengurutkan animasi induk dan anak.

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

Pustaka Variants yang Dapat Digunakan Ulang

Definisikan variants dalam berkas bersama dan impor di tempat yang diperlukan agar konfigurasi animasi tetap konsisten di seluruh aplikasi.

// 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" />

Pemeriksaan Singkat

Opsi transition Framer Motion apa yang menunda animasi komponen anak secara berurutan?

Jawab di pelajaran interaktif

Rangkuman

Variants adalah keadaan bernama yang didefinisikan sebagai objek. Tetapkan staggerChildren dalam transition milik induk untuk meneruskan animasi ke komponen anak secara otomatis. Gunakan useAnimation() untuk kontrol imperatif dan AnimatePresence dengan variant keluar untuk animasi saat komponen dilepas dari pohon.

Gratis untuk memulai

Belajar React dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 88
Pelajaran: 324

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Varian untuk Animasi Terorkestrasi” gratis?

Ya — teks lengkap “Varian untuk Animasi Terorkestrasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Varian untuk Animasi Terorkestrasi”?

Definisikan objek varian bernama dan teruskan melalui pohon komponen induk-anak. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Varian untuk Animasi Terorkestrasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy