React Academy · Oppitunti

Variantit orkestroituihin animaatioihin

Määritelkää nimetyt varianttiobjektit ja välittäkää ne vanhempi–lapsi-komponenttipuiden läpi.

Oppitunti 2/413 vaihetta

Variantit orkestroituihin animaatioihin on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä variantit ovat

Variantit ovat objekteina määritettyjä nimettyjä animaatiotiloja. Arvojen kirjoittamisen suoraan komponenttiin sijaan komponentit viittaavat varianttien nimiin, kuten 'hidden' ja 'visible'. Yläkomponentit voivat ohjata alikomponentteja automaattisesti.

Varianttien määrittäminen

Luokaa nimettyjä tiloja sisältävä variants-objekti. Välittäkää se motion-komponentin variants-proppiin.

const cardVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0 },
};

<motion.div
  variants={cardVariants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 0.4 }}
/>

Lomitetut alikomponentit

Käyttäkää staggerChildren-asetusta yläkomponentin transition-määrityksessä animoidaksenne alikomponentit yksi kerrallaan, kunkin välillä viive.

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>

Varianttien periytyminen

Kun yläkomponentin varianttitila muuttuu, kaikki saman varianttinimen jakavat alikomponentit animoituvat automaattisesti — animate-proppia ei tarvitse välittää jokaiselle alikomponentille.

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

Tilojen välillä vaihtaminen

Ohjatkaa aktiivista varianttia tilamuuttujalla. Framer Motion siirtyy sujuvasti nimettyjen tilojen välillä.

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

Varianttikohtainen transition

Lisätkää variantin sisälle transition-avain, jos haluatte mukauttaa vain kyseisen tilan ajoitusta.

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

Exit-variantit ja AnimatePresence

Lisätkää variants-objektiin exit-avain ja kääritkää komponentti AnimatePresence-elementtiin, jotta se animoituu poistuessaan.

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>

Sisäkkäisten varianttien ohitukset

Alikomponentit voivat ohittaa perityn varianttitilan omilla initial- tai animate-propseillaan ja irtautua tarvittaessa yläkomponentin ohjauksesta.

useAnimation varianttien imperatiiviseen ohjaukseen

useAnimation() palauttaa animaation ohjausobjektin. Käynnistäkää variantit ohjelmallisesti kutsumalla 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 } }} />

Orkestrointiasetukset

staggerChildren-asetuksen lisäksi voitte käyttää when-asetusta ('beforeChildren' | 'afterChildren') ylä- ja alikomponenttien animaatioiden järjestämiseen.

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

Uudelleenkäytettävät varianttikirjastot

Määrittäkää variantit jaetussa tiedostossa ja tuokaa ne tarvittaessa, jotta animaatioasetukset pysyvät yhdenmukaisina koko sovelluksessa.

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

Pikakertaus

Mikä Framer Motionin transition-asetus viivästyttää alikomponenttien animaatioita yksi toisensa jälkeen?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Variantit ovat objekteina määritettyjä nimettyjä tiloja. Asettakaa staggerChildren yläkomponentin transition-määritykseen, jotta animaatiot ketjuuntuvat automaattisesti alikomponentteihin. Käyttäkää useAnimation()-funktiota imperatiiviseen ohjaukseen ja AnimatePresence-komponenttia exit-varianttien kanssa poistoanimaatioihin.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Variantit orkestroituihin animaatioihin” ilmainen?

Kyllä – oppitunnin ”Variantit orkestroituihin animaatioihin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Variantit orkestroituihin animaatioihin”?

Määritelkää nimetyt varianttiobjektit ja välittäkää ne vanhempi–lapsi-komponenttipuiden läpi. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Variantit orkestroituihin animaatioihin”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Motion-komponentit ja animaatioiden perusteet
Variantit orkestroituihin animaatioihin
Eleanimaatiot: Hover, Tap ja Drag
Layout-animaatiot ja AnimatePresence

← Takaisin: React Academy