React Academy · Lektion

Variants för samordnade animationer

Definiera namngivna variantobjekt och vidarebefordra dem genom komponentträd med överordnade och underordnade komponenter.

Lektion 2 av 413 steg

Variants för samordnade animationer är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Vad är variants?

Variants är namngivna animationstillstånd som definieras som objekt. I stället för infogade värden refererar komponenter till variantnamn som 'hidden' och 'visible'. Överordnade komponenter kan automatiskt samordna underordnade komponenter.

Definiera variants

Skapa ett variants-objekt med namngivna tillstånd. Skicka det till propen variants 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 }}
/>

Fördröjda underordnade komponenter

Använd staggerChildren i den överordnade komponentens transition för att animera underordnade komponenter en i taget, med en fördröjning mellan varje.

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>

Variantpropagering

När den överordnade komponentens varianttillstånd ändras animeras alla underordnade komponenter som delar samma variantnamn automatiskt — du behöver inte skicka animate till varje underordnad komponent.

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

Växla mellan tillstånd

Styr vilken variant som är aktiv med en state-variabel. Framer Motion övergår smidigt mellan namngivna tillstånd.

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

Anpassad transition per variant

Lägg till nyckeln transition inuti en variant för att anpassa tidsinställningarna enbart för det tillståndet.

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

Lägg till en exit-nyckel i variants-objektet och omslut komponenten med AnimatePresence för att animera vid avmontering.

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>

Åsidosätta varianter i nästlade komponenter

Underordnade komponenter kan åsidosätta det ärvda varianttillståndet med sina egna props för initial eller animate och på så sätt vid behov lämna den överordnade samordningen.

useAnimation för imperativ variantstyrning

useAnimation() returnerar ett objekt för animationsstyrning. Anropa controls.start('variantName') programmatiskt för att utlösa 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 } }} />

Alternativ för samordning

Utöver staggerChildren kan du använda when ('beforeChildren' | 'afterChildren') för att sekvensera animationer för överordnade och underordnade komponenter.

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

Återanvändbara variantbibliotek

Definiera varianter i en delad fil och importera dem där de behövs för att hålla animationskonfigurationerna konsekventa i hela 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" />

Snabbkontroll

Vilket transition-alternativ i Framer Motion fördröjer animeringen av underordnade komponenter så att de körs en efter en?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Variants är namngivna tillstånd som definieras som objekt. Ange staggerChildren i en överordnad komponents transition för att automatiskt låta animationer fortplanta sig genom underordnade komponenter. Använd useAnimation() för imperativ styrning och AnimatePresence med exit-varianter för animationer vid avmontering.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Variants för samordnade animationer” gratis?

Ja – hela texten till ”Variants för samordnade animationer” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Variants för samordnade animationer”?

Definiera namngivna variantobjekt och vidarebefordra dem genom komponentträd med överordnade och underordnade komponenter. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Variants för samordnade animationer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Motion-komponenter och grundläggande animationer
Variants för samordnade animationer
Gestanimationer: hover, tap och drag
Layoutanimationer och AnimatePresence

← Tillbaka till React Academy