Animazioni di layout e AnimatePresence
Animi automaticamente i cambiamenti di layout con la prop layout e gestisca mount e unmount con AnimatePresence.
Animazioni di layout e AnimatePresence è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Animazioni del layout
Aggiunga la prop layout a un componente motion: Framer Motion animerà automaticamente qualsiasi modifica al layout, come dimensioni e posizione, causata dallo stato o da mutazioni del DOM, senza bisogno di posizionamento manuale.
<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
{/* Width animates smoothly when isExpanded changes */}
</motion.div>Valori della prop layout
La prop layout accetta true (l'intero layout), 'position' (solo la posizione) oppure 'size' (solo le dimensioni) per limitare ciò che viene animato.
<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size"> {/* only width/height animate */}layoutId per le transizioni di elementi condivisi
Assegni lo stesso layoutId a due elementi e Framer Motion li animerà come se fossero lo stesso elemento, anche se appartengono a componenti diversi.
// 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 abilita le animazioni exit. Senza di esso, i componenti smontati scompaiono immediatamente. Racchiuda in esso un rendering condizionale per animare lo smontaggio.
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>La prop key è obbligatoria
AnimatePresence richiede che ogni figlio abbia una key stabile. Senza una key univoca, React non può rilevare quando gli elementi vengono smontati anziché aggiornati.
// Animating between pages:
<AnimatePresence mode="wait">
<motion.div key={pathname} ... />
</AnimatePresence>La modalità di AnimatePresence
mode controlla la sovrapposizione tra gli elementi in uscita e quelli in entrata. 'wait' ritarda l'animazione di entrata finché quella di uscita non è completata. 'sync' (predefinita) esegue entrambe simultaneamente.
// 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>Animare gli elenchi con layout
Combini layout e AnimatePresence per animare il riordinamento e la rimozione degli elementi di un elenco.
<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 coordina le animazioni del layout tra più componenti motion indipendenti, facendoli animare insieme come un unico gruppo.
import { LayoutGroup } from 'framer-motion';
<LayoutGroup>
<Sidebar />
<MainContent />
{/* Both animate layout changes together */}
</LayoutGroup>Correggere la distorsione del layout
Le animazioni del layout possono distorcere bordi, ombre e border-radius. Utilizzi la prop layoutDependency o la correzione della scala tramite CSS per risolvere gli artefatti visivi.
<motion.div
layout
style={{ borderRadius: 12 }}
// Framer Motion auto-corrects border-radius during scale changes
/>Pattern di transizione su asse condiviso
Per i passaggi di una procedura guidata o per le schede, animi la posizione X in base alla direzione per creare una relazione spaziale significativa tra le schermate.
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>Controllo rapido
Quale modalità di AnimatePresence ritarda l'animazione di entrata finché non termina l'animazione di uscita?
Riepilogo
layout anima automaticamente le modifiche a dimensioni e posizione. layoutId trasforma un elemento in un altro tra due elementi nell'albero. AnimatePresence abilita le animazioni di uscita: assegni sempre ai figli props key stabili e scelga mode='wait' per le transizioni tra pagine.
Domande Frequenti
La lezione «Animazioni di layout e AnimatePresence» è gratuita?
Sì — il testo completo di «Animazioni di layout e AnimatePresence» è 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 «Animazioni di layout e AnimatePresence»?
Animi automaticamente i cambiamenti di layout con la prop layout e gestisca mount e unmount con AnimatePresence. 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 4 di 4.
Quanto tempo richiede la lezione «Animazioni di layout e AnimatePresence»?
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
- Componenti Motion e animazioni di base
- Variants per animazioni orchestrate
- Animazioni con gesture: hover, tap e drag
- Animazioni di layout e AnimatePresence