0Pricing
React Academy · Lektion

Layout-Animationen und AnimatePresence

Animieren Sie Layoutänderungen automatisch mit der layout-Prop und Mounting/Unmounting mit AnimatePresence.

Layout-Animationen und AnimatePresence ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Layout-Animationen

Fügen Sie einer Motion-Komponente die layout-Prop hinzu. Framer Motion animiert dann automatisch alle durch Zustand oder DOM-Mutationen verursachten Layoutänderungen (Größe, Position) – eine manuelle Positionierung ist nicht erforderlich.

<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
  {/* Width animates smoothly when isExpanded changes */}
</motion.div>

Werte der Layout-Prop

Die layout-Prop akzeptiert true (gesamtes Layout), 'position' (nur Position) oder 'size' (nur Größe), um den Animationsumfang einzuschränken.

<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size">     {/* only width/height animate */}

layoutId für Transitionen gemeinsamer Elemente

Geben Sie zwei Elementen dieselbe layoutId, und Framer Motion animiert zwischen ihnen, als wären sie dasselbe Element – auch über verschiedene Komponenten hinweg.

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

AnimatePresence

AnimatePresence aktiviert exit-Animationen. Ohne diese Komponente verschwinden ausgehängte Komponenten sofort. Umschließen Sie eine bedingte Darstellung damit, um das Aushängen zu animieren.

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>

Die key-Prop ist erforderlich

AnimatePresence benötigt für jedes untergeordnete Element einen stabilen key. Ohne einen eindeutigen Key kann React nicht erkennen, wann Elemente ausgehängt werden und wann sie aktualisiert werden.

// Animating between pages:
<AnimatePresence mode="wait">
  <motion.div key={pathname} ... />
</AnimatePresence>

AnimatePresence-Modus

mode steuert, wie ausgehende und eingehende Elemente sich überlagern. 'wait' verzögert die Enter-Animation, bis die Exit-Animation abgeschlossen ist. 'sync' (Standard) führt beide gleichzeitig aus.

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

Listen mit Layout animieren

Kombinieren Sie layout und AnimatePresence, um das Umsortieren und Entfernen von Listenelementen zu animieren.

<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 koordiniert Layout-Animationen über mehrere unabhängige Motion-Komponenten hinweg, sodass sie gemeinsam als eine Gruppe animiert werden.

import { LayoutGroup } from 'framer-motion';

<LayoutGroup>
  <Sidebar />
  <MainContent />
  {/* Both animate layout changes together */}
</LayoutGroup>

Layout-Verzerrungen korrigieren

Layout-Animationen können Rahmen, Schatten und border-radius verzerren. Verwenden Sie die layoutDependency-Prop oder eine CSS-Scale-Korrektur, um visuelle Artefakte zu beheben.

<motion.div
  layout
  style={{ borderRadius: 12 }}
  // Framer Motion auto-corrects border-radius during scale changes
/>

Muster für Transitionen entlang einer gemeinsamen Achse

Animieren Sie bei Assistentenschritten oder Tabs die X-Position abhängig von der Richtung, um eine nachvollziehbare räumliche Beziehung zwischen den Ansichten herzustellen.

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>

Kurztest

Welcher AnimatePresence-Modus verzögert die Enter-Animation, bis die Exit-Animation abgeschlossen ist?

Zusammenfassung

layout animiert Änderungen an Größe und Position automatisch. layoutId lässt zwei Elemente an unterschiedlichen Stellen im Komponentenbaum ineinander übergehen. AnimatePresence ermöglicht Exit-Animationen – geben Sie untergeordneten Elementen immer stabile key-Props und wählen Sie für Seitenübergänge mode='wait'.

Häufig gestellte Fragen

Ist die Lektion „Layout-Animationen und AnimatePresence“ kostenlos?

Ja — der vollständige Text von „Layout-Animationen und AnimatePresence“ 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 „Layout-Animationen und AnimatePresence“?

Animieren Sie Layoutänderungen automatisch mit der layout-Prop und Mounting/Unmounting mit AnimatePresence. 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 4 von 4.

Wie lange dauert die Lektion „Layout-Animationen und AnimatePresence“?

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

  1. Motion-Components und grundlegende Animationen
  2. Variants für orchestrierte Animationen
  3. Gestenanimationen: Hover, Tap und Drag
  4. Layout-Animationen und AnimatePresence
← Zurück zu React Academy