Layoutanimationer og AnimatePresence
Animér layoutændringer automatisk med layout-proppen, og montér eller afmontér med AnimatePresence.
Layoutanimationer og AnimatePresence er en gratis React Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.
Layout-animationer
Tilføj proppen layout til en motion-komponent, så animerer Framer Motion automatisk alle layoutændringer (størrelse, position), der skyldes tilstands- eller DOM-ændringer – du behøver ikke at angive positioner manuelt.
<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
{/* Width animates smoothly when isExpanded changes */}
</motion.div>Værdier for layout-proppen
Proppen layout accepterer true (hele layoutet), 'position' (kun position) eller 'size' (kun størrelse) for at begrænse, hvad der animeres.
<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size"> {/* only width/height animate */}layoutId til overgange for delte elementer
Giv to elementer samme layoutId, så animerer Framer Motion overgangen mellem dem, som om de var det samme element, selv på tværs af forskellige 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 automaticallyAnimatePresence
AnimatePresence aktiverer exit-animationer. Uden den forsvinder afmonterede komponenter øjeblikkeligt. Pak en betinget gengivelse ind i den for at animere afmonteringer.
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>Proppen key er påkrævet
AnimatePresence kræver, at hvert underordnet element har en stabil key. Uden en unik nøgle kan React ikke registrere, hvornår elementer afmonteres, og hvornår de opdateres.
// Animating between pages:
<AnimatePresence mode="wait">
<motion.div key={pathname} ... />
</AnimatePresence>AnimatePresence-tilstanden mode
mode styrer, hvordan udgående og indkommende elementer overlapper. 'wait' forsinker enter-animationen, indtil exit-animationen er færdig. 'sync' (standard) kø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>Animation af lister med layout
Kombinér layout og AnimatePresence for at animere listeelementer, når de omarrangeres eller fjernes.
<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-animationer på tværs af flere uafhængige motion-komponenter, så de animeres sammen som én gruppe.
import { LayoutGroup } from 'framer-motion';
<LayoutGroup>
<Sidebar />
<MainContent />
{/* Both animate layout changes together */}
</LayoutGroup>Korrigering af layoutforvrængning
Layout-animationer kan forvrænge kanter, skygger og border-radius. Brug proppen layoutDependency eller CSS-skala-korrektion til at rette visuelle fejl.
<motion.div
layout
style={{ borderRadius: 12 }}
// Framer Motion auto-corrects border-radius during scale changes
/>Mønster for overgang langs en fælles akse
For trin i en guide eller faner skal du animere X-positionen baseret på retningen for at skabe en meningsfuld rumlig relation mellem skærmene.
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>Hurtigt tjek
Hvilken AnimatePresence-tilstand forsinker indgangsanimationen, indtil udgangsanimationen er færdig?
Opsummering
layout animerer automatisk ændringer i størrelse og position. layoutId forvandler ét element til et andet på tværs af komponenttræet. AnimatePresence aktiverer udgangsanimationer — giv altid underordnede elementer stabile key-egenskaber, og vælg mode='wait' til sideovergange.
Lær React med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 88
- Lektioner
- 324
Ofte stillede spørgsmål
Er lektionen “Layoutanimationer og AnimatePresence” gratis?
Ja — hele teksten til “Layoutanimationer og AnimatePresence” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Layoutanimationer og AnimatePresence”?
Animér layoutændringer automatisk med layout-proppen, og montér eller afmontér med AnimatePresence. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Academy?
Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Layoutanimationer og AnimatePresence”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Academy-lektion?
Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Motion-komponenter og grundlæggende animationer
- Varianter til orkestrerede animationer
- Gesture-animationer: Hover, tap og træk
- Layoutanimationer og AnimatePresence