React Academy · Lekcja

Animacje układu i AnimatePresence

Automatyczne animowanie zmian układu za pomocą propsa layout oraz montowanie i odmontowywanie za pomocą AnimatePresence.

Animacje układu i AnimatePresence to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Animacje układu

Po dodaniu propa layout do komponentu motion Framer Motion automatycznie animuje wszystkie zmiany układu (rozmiaru i położenia) spowodowane zmianą stanu lub mutacjami DOM — nie trzeba ręcznie ustawiać położenia.

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

Wartości właściwości layout

Prop layout przyjmuje wartość true (cały układ), 'position' (tylko położenie) lub 'size' (tylko rozmiar), aby ograniczyć zakres animacji.

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

layoutId dla przejść współdzielonych elementów

Jeśli dwóm elementom zostanie nadany ten sam layoutId, Framer Motion będzie animować przejście między nimi tak, jakby były tym samym elementem, nawet jeśli należą do różnych komponentów.

// 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 umożliwia animacje exit. Bez niego odmontowywane komponenty znikają natychmiast. Aby animować odmontowywanie, należy opakować w nim renderowanie warunkowe.

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>

Właściwość key jest wymagana

AnimatePresence wymaga, aby każde dziecko miało stabilny element key. Bez unikalnego klucza React nie potrafi wykryć, czy elementy są odmontowywane, czy aktualizowane.

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

Tryb AnimatePresence

mode określa sposób nakładania się elementów wychodzących i wchodzących. 'wait' opóźnia animację wejścia do czasu zakończenia wyjścia. 'sync' (domyślne) uruchamia obie animacje jednocześnie.

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

Animowanie list za pomocą layout

Połączenie layout i AnimatePresence pozwala animować zmianę kolejności i usuwanie elementów listy.

<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 koordynuje animacje układu wielu niezależnych komponentów motion, aby animowały się wspólnie jako jedna grupa.

import { LayoutGroup } from 'framer-motion';

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

Korygowanie zniekształceń układu

Animacje układu mogą zniekształcać obramowania, cienie i border-radius. Aby naprawić artefakty wizualne, należy użyć propa layoutDependency lub korekcji skali CSS.

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

Wzorzec przejścia ze współdzieloną osią

W przypadku kroków kreatora lub kart należy animować położenie X na podstawie kierunku, aby utworzyć znaczącą relację przestrzenną między ekranami.

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>

Szybki test

Który tryb AnimatePresence opóźnia animację wejścia do czasu zakończenia animacji wyjścia?

Podsumowanie

layout automatycznie animuje zmiany rozmiaru i położenia. layoutId płynnie przekształca jeden element w drugi między dwoma elementami w drzewie. AnimatePresence umożliwia animacje wyjścia — dzieciom należy zawsze nadawać stabilne właściwości key, a w przypadku przejść między stronami wybrać mode='wait'.

Często zadawane pytania

Czy lekcja „Animacje układu i AnimatePresence” jest bezpłatna?

Tak — pełny tekst „Animacje układu i AnimatePresence” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Animacje układu i AnimatePresence”?

Automatyczne animowanie zmian układu za pomocą propsa layout oraz montowanie i odmontowywanie za pomocą AnimatePresence. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Animacje układu i AnimatePresence”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do React Academy