PricingLoginStart free
React Academy · leksjon

Varianter for orkestrerte animasjoner

Definer navngitte variantobjekter, og spre dem gjennom komponenttrær med foreldre og barn.

Leksjon 2 av 413 trinn

Varianter for orkestrerte animasjoner er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva er varianter?

Varianter er navngitte animasjonstilstander definert som objekter. I stedet for innebygde verdier refererer komponenter til variantnavn som 'hidden' og 'visible'. Overordnede komponenter kan automatisk orkestrere underordnede komponenter.

Definere varianter

Opprett et variants-objekt med navngitte tilstander. Send det inn til variants-propen på en motion-komponent.

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

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

Forskjøvede underkomponenter

Bruk staggerChildren i den overordnede komponentens overgang for å animere underkomponentene én etter én, med en forsinkelse mellom hver.

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>

Propagering av varianter

Når varianttilstanden til en overordnet komponent endres, animeres alle underkomponenter som deler samme variantnavn automatisk – det er ikke nødvendig å sende animate til hver underkomponent.

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

Bytte mellom tilstander

Styr hvilken variant som er aktiv, med en tilstandsvariabel. Framer Motion går jevnt mellom navngitte tilstander.

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

Egendefinert overgang per variant

Legg til en transition-nøkkel i en variant for å tilpasse tidsstyringen bare for denne bestemte tilstanden.

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

Exit-varianter med AnimatePresence

Legg til en exit-nøkkel i variants-objektet, og pakk komponenten inn i AnimatePresence for å animere når den fjernes.

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>

Overstyring av nestede varianter

Underkomponenter kan overstyre den arvede varianttilstanden med sine egne initial- eller animate-props, slik at de ved behov ikke lenger styres av den overordnede komponenten.

useAnimation for imperativ variantkontroll

useAnimation() returnerer et objekt for animasjonskontroll. Kall controls.start('variantName') programmatisk for å utløse varianter.

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

Alternativer for orkestrering

I tillegg til staggerChildren kan du bruke when ('beforeChildren' | 'afterChildren') til å sekvensere animasjoner for overordnede komponenter og underkomponenter.

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

Gjenbrukbare variantbiblioteker

Definer varianter i en delt fil, og importer dem der de trengs, slik at animasjonskonfigurasjonen er konsekvent i hele appen.

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

Hurtigsjekk

Hvilket alternativ for Framer Motion-overgang forsinker animasjoner av underkomponenter én etter én?

Besvar den i den interaktive leksjonen

Oppsummering

Varianter er navngitte tilstander definert som objekter. Angi staggerChildren i den overordnede komponentens overgang for å spre animasjoner automatisk gjennom underkomponentene. Bruk useAnimation() for imperativ kontroll og AnimatePresence med exit-varianter for animasjoner når komponenter fjernes.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Varianter for orkestrerte animasjoner» gratis?

Ja – hele teksten i «Varianter for orkestrerte animasjoner» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Varianter for orkestrerte animasjoner»?

Definer navngitte variantobjekter, og spre dem gjennom komponenttrær med foreldre og barn. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Varianter for orkestrerte animasjoner»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Motion-komponenter og grunnleggende animasjoner
  2. Varianter for orkestrerte animasjoner
  3. Gestanimasjoner: Hover, Tap og Drag
  4. Layoutanimasjoner og AnimatePresence
← Tilbake til React Academy