React Academy · leksjon

Layoutanimasjoner og AnimatePresence

Animer layoutendringer automatisk med layout-propen, og håndter montering og avmontering med AnimatePresence.

Leksjon 4 av 412 trinn

Layoutanimasjoner og AnimatePresence er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 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.

Layout-animasjoner

Legg til layout-propen på en motion-komponent, så animerer Framer Motion automatisk alle layoutendringer (størrelse, posisjon) som skyldes tilstandsendringer eller DOM-mutasjoner – uten behov for manuell posisjonering.

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

Verdier for layout-propen

layout-propen godtar true (all layout), 'position' (bare posisjon) eller 'size' (bare størrelse) for å begrense hva som animeres.

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

layoutId for overganger mellom delte elementer

Gi to elementer samme layoutId, så animerer Framer Motion overgangen mellom dem som om de var det samme elementet, også på tvers av ulike komponenter.

// 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 aktiverer exit-animasjoner. Uten den forsvinner komponenter som fjernes, umiddelbart. Pakk en betinget gjengivelse inn i den for å animere når komponenter fjernes.

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>

Propen key er påkrevd

AnimatePresence krever at hvert underordnet element har en stabil key. Uten en unik key kan ikke React oppdage når elementer fjernes, i motsetning til når de oppdateres.

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

AnimatePresence-modus

mode styrer hvordan elementer som forsvinner og kommer inn, overlapper. 'wait' forsinker enter-animasjonen til exit-animasjonen er fullført. 'sync' (standard) kjører begge samtidig.

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

Animere lister med layout

Kombiner layout og AnimatePresence for å animere omorganisering og fjerning av listeelementer.

<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 koordinerer layout-animasjoner på tvers av flere uavhengige motion-komponenter, slik at de animeres sammen som én gruppe.

import { LayoutGroup } from 'framer-motion';

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

Korrigere layoutforvrengning

Layout-animasjoner kan forvrenge kanter, skygger og border-radius. Bruk layoutDependency-propen eller CSS-skala-korrigering for å rette visuelle artefakter.

<motion.div
  layout
  style={{ borderRadius: 12 }}
  // Framer Motion auto-corrects border-radius during scale changes
/>

Mønster for overgang langs en delt akse

For veivisertrinn eller faner kan du animere X-posisjonen basert på retningen for å skape en meningsfull romlig sammenheng mellom skjermbildene.

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>

Hurtigsjekk

Hvilken AnimatePresence-modus utsetter enter-animasjonen til exit-animasjonen er ferdig?

Besvar den i den interaktive leksjonen

Oppsummering

layout animerer endringer i størrelse og posisjon automatisk. layoutId forvandler ett element til et annet på tvers av treet. AnimatePresence aktiverer exit-animasjoner – gi alltid barna stabile key-egenskaper, og velg mode='wait' for sideoverganger.

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 gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Layoutanimasjoner og AnimatePresence» gratis?

Ja – hele teksten i «Layoutanimasjoner og AnimatePresence» 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 «Layoutanimasjoner og AnimatePresence»?

Animer layoutendringer automatisk med layout-propen, og håndter montering og avmontering med AnimatePresence. 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 4 av 4.

Hvor lang tid tar leksjonen «Layoutanimasjoner og AnimatePresence»?

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

Motion-komponenter og grunnleggende animasjoner
Varianter for orkestrerte animasjoner
Gestanimasjoner: Hover, Tap og Drag
Layoutanimasjoner og AnimatePresence

← Tilbake til React Academy