0Pricing
React Academy · Leçon

Variantes pour des animations orchestrées

Définissez des objets de variantes nommés et propagez-les dans les arborescences de composants parents-enfants.

Variantes pour des animations orchestrées est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Que sont les variants ?

Les variants sont des états d’animation nommés, définis sous forme d’objets. Au lieu d’utiliser des valeurs intégrées directement, les composants font référence à des noms de variants comme 'hidden' et 'visible'. Les composants parents peuvent orchestrer automatiquement leurs enfants.

Définir des variants

Créez un objet variants contenant des états nommés. Transmettez-le à la propriété variants d’un composant animé.

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

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

Enfants en cascade

Utilisez staggerChildren dans la transition d’un parent pour animer les enfants l’un après l’autre, avec un délai entre chacun.

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>

Propagation des variants

Lorsque l’état de variant d’un parent change, tous les enfants qui partagent le même nom de variant s’animent automatiquement eux aussi — il n’est pas nécessaire de transmettre animate à chaque enfant.

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

Basculer entre les états

Contrôlez le variant actif à l’aide d’une variable d’état. Framer Motion effectue une transition fluide entre les états nommés.

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

Transition personnalisée pour chaque variant

Ajoutez une clé transition à l’intérieur d’un variant pour personnaliser le minutage de cet état uniquement.

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

Variants de sortie avec AnimatePresence

Ajoutez une clé exit à votre objet variants et enveloppez le composant dans AnimatePresence pour l’animer lors de son démontage.

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>

Remplacements de variants imbriqués

Les enfants peuvent remplacer l’état de variant hérité avec leurs propres propriétés initial ou animate, afin de sortir de l’orchestration du parent lorsque cela est nécessaire.

useAnimation pour le contrôle impératif des variants

useAnimation() renvoie un objet de contrôles d’animation. Appelez controls.start('variantName') par programmation pour déclencher les variants.

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

Options d’orchestration

En plus de staggerChildren, vous pouvez utiliser when ('beforeChildren' | 'afterChildren') pour séquencer les animations du parent et des enfants.

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

Bibliothèques de variants réutilisables

Définissez les variants dans un fichier partagé et importez-les là où vous en avez besoin afin de conserver des configurations d’animation cohérentes dans toute l’application.

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

Vérification rapide

Quelle option de transition de Framer Motion anime les enfants l’un après l’autre avec un délai entre eux ?

Récapitulatif

Les variants sont des états nommés définis sous forme d’objets. Définissez staggerChildren dans la transition d’un parent pour faire se propager automatiquement les animations aux enfants. Utilisez useAnimation() pour le contrôle impératif et AnimatePresence avec des variants de sortie pour les animations lors du démontage.

Questions Fréquemment Posées

La leçon « Variantes pour des animations orchestrées » est-elle gratuite ?

Oui — le texte complet de « Variantes pour des animations orchestrées » 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 « Variantes pour des animations orchestrées » ?

Définissez des objets de variantes nommés et propagez-les dans les arborescences de composants parents-enfants. 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 2 sur 4.

Combien de temps prend la leçon « Variantes pour des animations orchestrées » ?

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

  1. Composants Motion et animations de base
  2. Variantes pour des animations orchestrées
  3. Animations par gestes : survol, appui et glissement
  4. Animations de mise en page et AnimatePresence
← Retour à React Academy