Vue Academy · Lekcja

TransitionGroup do animowania list

Animowanie list v-for, przejścia przesunięcia, animacje sekwencyjne z opóźnieniem.

TransitionGroup do animowania list to bezpłatna lekcja Vue 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Animowanie list

<Transition> obsługuje pojedynczy element. W przypadku list renderowanych za pomocą v-for należy użyć <TransitionGroup>, który animuje elementy dodawane, usuwane i zmieniające kolejność.

Właściwość tag

W przeciwieństwie do Transition, TransitionGroup może renderować rzeczywisty element opakowujący. Należy przekazać tag="ul" lub dowolny inny tag, a element ten zostanie wyrenderowany wokół elementów listy.

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

Każdy element potrzebuje klucza

Unikalny atrybut :key na każdym elemencie jest wymagany. Vue używa go do śledzenia elementów, które się przesunęły, pojawiły lub zniknęły. W przypadku animowanych list nigdy nie należy używać indeksu tablicy jako klucza.

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

Klasy wejścia i opuszczania

TransitionGroup używa tych samych klas wejścia i opuszczania co Transition. Należy je zdefiniować, aby określić sposób pojawiania się i usuwania poszczególnych elementów.

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

Specjalna klasa move

Najważniejszą funkcją jest klasa -move, na przykład list-move. Gdy elementy zmieniają kolejność, Vue płynnie animuje każdy z nich do nowej pozycji za pomocą przejścia właściwości transform.

.list-move {
  transition: transform 0.4s ease;
}

Technika FLIP

Za klasą -move kryje się technika FLIP: najpierw (First) zapisywana jest stara pozycja, następnie (Last) odczytywana jest nowa, potem (Invert) stosowany jest transform, aby element wyglądał na nieruchomy, a na końcu (Play) transform jest usuwany. Vue wykonuje te czynności automatycznie.

/* Vue computes: translate(oldX - newX) then animates to 0 */

Usuwane elementy wymagają pozycjonowania absolutnego

Usuwany element nadal zajmuje miejsce, co może zakłócić animację przesuwania sąsiednich elementów. Należy ustawić position: absolute na klasie leave-active, aby usuwane elementy zostały wyjęte z normalnego przepływu układu.

.list-leave-active {
  position: absolute;
}

Przykład sortowalnej listy

Połączenie klas wejścia, opuszczania i przesuwania sprawia, że Vue jednocześnie animuje dodawanie, usuwanie i zmianę kolejności elementów.

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

Efekt kaskadowy za pomocą transitionDelay

Aby elementy pojawiały się jeden po drugim, należy powiązać inline transition-delay z indeksem elementu. Każdy element czeka nieco dłużej niż poprzedni.

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

Efekt kaskadowy z hookami JS

W przypadku kaskady zależnej od danych można również użyć hooków JS i atrybutu data-index, opóźniając każde onEnter o czas zależny od indeksu elementu.

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

Uwagi dotyczące wydajności

FLIP animuje właściwość transform, która dobrze wykorzystuje GPU. Należy utrzymywać rozsądny rozmiar list i preferować właściwości transform oraz opacity zamiast właściwości wywołujących przeliczanie układu, takich jak width lub top, aby uzyskać płynny ruch z szybkością 60 kl./s.

Szybki test

Co umożliwia klasa list-move?

Podsumowanie

Poznano <TransitionGroup> do obsługi list: renderowanie elementu opakowującego za pomocą tag, nadawanie każdemu elementowi unikalnego :key, używanie klas wejścia i opuszczania wraz z klasą -move do animowania zmiany kolejności za pomocą FLIP, absolutne pozycjonowanie usuwanych elementów oraz tworzenie efektu kaskadowego z użyciem transitionDelay zależnego od indeksu.

Często zadawane pytania

Czy lekcja „TransitionGroup do animowania list” jest bezpłatna?

Tak — pełny tekst „TransitionGroup do animowania list” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „TransitionGroup do animowania list”?

Animowanie list v-for, przejścia przesunięcia, animacje sekwencyjne z opóźnieniem. Ćwiczysz Vue 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ąć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue 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 „TransitionGroup do animowania list”?

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 Vue Academy?

Tak. Każda lekcja Vue 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 Vue Academy