Variants für orchestrierte Animationen
Definieren Sie benannte Variant-Objekte und geben Sie sie durch Component-Bäume von Eltern- zu Kind-Components weiter.
Variants für orchestrierte Animationen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Variants?
Variants sind benannte Animationszustände, die als Objekte definiert werden. Statt Inline-Werte zu verwenden, verweisen Komponenten auf Variant-Namen wie 'hidden' und 'visible'. Übergeordnete Komponenten können untergeordnete Komponenten automatisch orchestrieren.
Variants definieren
Erstellen Sie ein variants-Objekt mit benannten Zuständen. Übergeben Sie es über die variants-Prop an eine Motion-Komponente.
const cardVariants = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0 },
};
<motion.div
variants={cardVariants}
initial="hidden"
animate="visible"
transition={{ duration: 0.4 }}
/>Gestaffelte untergeordnete Komponenten
Verwenden Sie staggerChildren in der Transition eines übergeordneten Elements, um untergeordnete Elemente mit einer Verzögerung nacheinander zu animieren.
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>Weitergabe von Variants
Wenn sich der Variant-Zustand eines übergeordneten Elements ändert, werden alle untergeordneten Elemente mit demselben Variant-Namen automatisch ebenfalls animiert – Sie müssen animate nicht an jedes untergeordnete Element übergeben.
// 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>Zwischen Zuständen wechseln
Steuern Sie mit einer Zustandsvariablen, welcher Variant aktiv ist. Framer Motion wechselt nahtlos zwischen benannten Zuständen.
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 }}
/>Benutzerdefinierte Transition pro Variant
Fügen Sie innerhalb eines Variants einen transition-Schlüssel hinzu, um das Timing nur für diesen bestimmten Zustand anzupassen.
const menuVariants = {
closed: {
scaleY: 0,
transition: { duration: 0.2, ease: 'easeIn' },
},
open: {
scaleY: 1,
transition: { duration: 0.3, ease: 'easeOut', staggerChildren: 0.05 },
},
};Exit-Variants mit AnimatePresence
Fügen Sie Ihrem variants-Objekt einen exit-Schlüssel hinzu und schließen Sie die Komponente in AnimatePresence ein, um sie beim Aushängen zu animieren.
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>Überschreiben verschachtelter Variants
Untergeordnete Komponenten können den geerbten Variant-Zustand mit eigenen initial- oder animate-Props überschreiben und sich bei Bedarf aus der Orchestrierung des übergeordneten Elements lösen.
useAnimation für imperative Variant-Steuerung
useAnimation() gibt ein Objekt zur Animationssteuerung zurück. Rufen Sie programmgesteuert controls.start('variantName') auf, um Variants auszulösen.
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 } }} />Orchestrierungsoptionen
Zusätzlich zu staggerChildren können Sie when ('beforeChildren' | 'afterChildren') verwenden, um Animationen des übergeordneten und der untergeordneten Elemente zu sequenzieren.
const container = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
when: 'beforeChildren', // parent fades in before stagger starts
staggerChildren: 0.1,
},
},
};Wiederverwendbare Variant-Bibliotheken
Definieren Sie Variants in einer gemeinsamen Datei und importieren Sie sie bei Bedarf, damit die Animationskonfigurationen in der gesamten App konsistent bleiben.
// 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" />Schnelltest
Welche Framer-Motion-Transition-Option verzögert die Animationen untergeordneter Elemente nacheinander?
Zusammenfassung
Variants sind benannte Zustände, die als Objekte definiert werden. Setzen Sie staggerChildren in der Transition eines übergeordneten Elements, um Animationen automatisch an untergeordnete Elemente weiterzugeben. Verwenden Sie useAnimation() für imperative Steuerung und AnimatePresence mit Exit-Variants für Animationen beim Aushängen.
Häufig gestellte Fragen
Ist die Lektion „Variants für orchestrierte Animationen“ kostenlos?
Ja — der vollständige Text von „Variants für orchestrierte Animationen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Variants für orchestrierte Animationen“?
Definieren Sie benannte Variant-Objekte und geben Sie sie durch Component-Bäume von Eltern- zu Kind-Components weiter. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Variants für orchestrierte Animationen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Motion-Components und grundlegende Animationen
- Variants für orchestrierte Animationen
- Gestenanimationen: Hover, Tap und Drag
- Layout-Animationen und AnimatePresence