Animations de mise en page et AnimatePresence
Animez automatiquement les changements de mise en page avec la propriété layout et gérez le montage et le démontage avec AnimatePresence.
Animations de mise en page et AnimatePresence est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Animations de mise en page
Ajoutez la propriété layout à un composant animé et Framer Motion anime automatiquement toute modification de mise en page (taille, position) causée par un état ou des mutations du DOM — aucun positionnement manuel n’est nécessaire.
<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
{/* Width animates smoothly when isExpanded changes */}
</motion.div>Valeurs de la propriété de mise en page
La propriété layout accepte true (toute la mise en page), 'position' (la position uniquement) ou 'size' (la taille uniquement) pour limiter ce qui est animé.
<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size"> {/* only width/height animate */}layoutId pour les transitions d’éléments partagés
Attribuez le même layoutId à deux éléments et Framer Motion les animera comme s’il s’agissait du même élément, même s’ils appartiennent à des composants différents.
// 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 active les animations de sortie exit. Sans lui, les composants démontés disparaissent instantanément. Enveloppez un rendu conditionnel avec lui pour animer les démontages.
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 propriété key est obligatoire
AnimatePresence nécessite que chaque enfant possède une key stable. Sans clé unique, React ne peut pas détecter si les éléments sont démontés ou mis à jour.
// Animating between pages:
<AnimatePresence mode="wait">
<motion.div key={pathname} ... />
</AnimatePresence>Mode d’AnimatePresence
mode contrôle le chevauchement des éléments sortants et entrants. 'wait' retarde l’animation d’entrée jusqu’à la fin de la sortie. 'sync' (par défaut) exécute les deux simultanément.
// 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>Animer des listes avec la mise en page
Combinez layout et AnimatePresence pour animer le réordonnancement et la suppression des éléments d’une liste.
<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 coordonne les animations de mise en page de plusieurs composants animés indépendants afin qu’ils s’animent ensemble comme un seul groupe.
import { LayoutGroup } from 'framer-motion';
<LayoutGroup>
<Sidebar />
<MainContent />
{/* Both animate layout changes together */}
</LayoutGroup>Corriger les déformations de mise en page
Les animations de mise en page peuvent déformer les bordures, les ombres et le rayon des bordures. Utilisez la propriété layoutDependency ou la correction d’échelle CSS pour corriger les artefacts visuels.
<motion.div
layout
style={{ borderRadius: 12 }}
// Framer Motion auto-corrects border-radius during scale changes
/>Schéma de transition sur un axe partagé
Pour les étapes d’un assistant ou les onglets, animez la position X en fonction de la direction afin de créer une relation spatiale significative entre les écrans.
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>Vérification rapide
Quel mode d’AnimatePresence retarde l’animation d’entrée jusqu’à la fin de l’animation de sortie ?
Récapitulatif
layout anime automatiquement les changements de taille et de position. layoutId réalise une transition entre deux éléments dans l’arbre. AnimatePresence active les animations de sortie : donnez toujours aux éléments enfants des propriétés key stables et choisissez mode='wait' pour les transitions entre les pages.
Questions Fréquemment Posées
La leçon « Animations de mise en page et AnimatePresence » est-elle gratuite ?
Oui — le texte complet de « Animations de mise en page et AnimatePresence » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Animations de mise en page et AnimatePresence » ?
Animez automatiquement les changements de mise en page avec la propriété layout et gérez le montage et le démontage avec AnimatePresence. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Animations de mise en page et AnimatePresence » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Composants Motion et animations de base
- Variantes pour des animations orchestrées
- Animations par gestes : survol, appui et glissement
- Animations de mise en page et AnimatePresence