0Pricing
React Academy · Lezione

Variants per animazioni orchestrate

Definisca oggetti variant nominati e li propaghi nell'albero dei componenti padre-figlio.

Variants per animazioni orchestrate è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Che cosa sono le varianti?

Le varianti sono stati di animazione con nome, definiti come oggetti. Invece di usare valori inline, i componenti fanno riferimento a nomi di varianti come 'hidden' e 'visible'. I componenti padre possono orchestrare automaticamente quelli figli.

Definire le varianti

Crei un oggetto variants con stati denominati. Lo passi alla prop variants di un componente motion.

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

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

Figli scaglionati

Utilizzi staggerChildren nella transition del componente padre per animare i figli uno dopo l'altro, con un ritardo tra ciascuno.

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>

Propagazione delle varianti

Quando cambia lo stato della variante del componente padre, anche tutti i figli che condividono lo stesso nome di variante si animano automaticamente: non è necessario passare animate a ogni figlio.

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

Alternare tra gli stati

Controlli quale variante è attiva con una variabile di stato. Framer Motion effettua una transizione fluida tra gli stati denominati.

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

Transizione personalizzata per variante

Aggiunga una chiave transition all'interno di una variante per personalizzare la temporizzazione solo per quello specifico stato.

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

Varianti di uscita con AnimatePresence

Aggiunga una chiave exit all'oggetto variants e racchiuda il componente in AnimatePresence per animarlo durante lo smontaggio.

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>

Override delle varianti annidate

I figli possono sovrascrivere lo stato della variante ereditato con le proprie props initial o animate, uscendo dall'orchestrazione del componente padre quando necessario.

useAnimation per il controllo imperativo delle varianti

useAnimation() restituisce un oggetto per i controlli dell'animazione. Chiami programmaticamente controls.start('variantName') per attivare le varianti.

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

Opzioni di orchestrazione

Oltre a staggerChildren, può utilizzare when ('beforeChildren' | 'afterChildren') per mettere in sequenza le animazioni del componente padre e dei figli.

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

Librerie di varianti riutilizzabili

Definisca le varianti in un file condiviso e le importi dove necessario per mantenere coerenti le configurazioni delle animazioni in tutta l'app.

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

Verifica rapida

Quale opzione di transizione di Framer Motion ritarda le animazioni dei figli una dopo l'altra?

Riepilogo

Le varianti sono stati denominati definiti come oggetti. Imposti staggerChildren nella transition del componente padre per propagare automaticamente le animazioni ai figli. Utilizzi useAnimation() per il controllo imperativo e AnimatePresence con le varianti di uscita per le animazioni durante lo smontaggio.

Domande Frequenti

La lezione «Variants per animazioni orchestrate» è gratuita?

Sì — il testo completo di «Variants per animazioni orchestrate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Variants per animazioni orchestrate»?

Definisca oggetti variant nominati e li propaghi nell'albero dei componenti padre-figlio. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Variants per animazioni orchestrate»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Componenti Motion e animazioni di base
  2. Variants per animazioni orchestrate
  3. Animazioni con gesture: hover, tap e drag
  4. Animazioni di layout e AnimatePresence
← Torna a React Academy