Vue Academy · Lekcja

Komponent Transition

Klasy v-enter-from, v-enter-active, v-enter-to, v-leave-*, właściwość name dla własnych klas.

Komponent Transition to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 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.

Działanie komponentu Transition

Vue udostępnia wbudowany komponent <Transition>, który stosuje animacje wejścia i wyjścia do pojedynczego elementu lub komponentu podczas jego wstawiania albo usuwania za pomocą v-if lub v-show.

Sam komponent nie renderuje żadnego dodatkowego elementu DOM — zarządza jedynie klasami CSS i czasem trwania animacji swojego elementu potomnego.

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

Tylko jeden element

<Transition> oczekuje dokładnie jednego bezpośredniego elementu potomnego. Opakowanie wielu elementów siostrzanych nie zadziała — w przypadku list użyj zamiast tego <TransitionGroup>.

Element potomny musi być przełączany za pomocą v-if, v-show lub komponentu dynamicznego.

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

Sześć klas przejścia

Podczas wejścia lub wyjścia Vue automatycznie dodaje i usuwa kolejno sześć klas.

v-enter-from / v-leave-from — stan początkowy
v-enter-active / v-leave-active — aktywna faza (w tym miejscu należy umieścić przejście)
v-enter-to / v-leave-to — stan końcowy

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

Nadawanie nazwy przejściu

Przekaż przejściu właściwość name, aby zmienić prefiks klas z v- na własną nazwę. Gdy name="fade", klasy przyjmą nazwy fade-enter-from, fade-enter-active itd.

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

Kompletny przykład efektu zanikania

Klasyczny efekt zanikania animuje właściwość opacity. Element zaczyna się od pełnej przezroczystości, klasa aktywna określa przejście, a klasa końcowa nadaje mu pełną nieprzezroczystość.

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

Sekwencja wejścia krok po kroku

Gdy element zostaje wstawiony:

Przed renderowaniem dodawane są fade-enter-from i fade-enter-active (opacity 0).
W następnej klatce fade-enter-from jest usuwana, a dodawana jest fade-enter-to, więc opacity animuje się w kierunku wartości 1.
Po zakończeniu przejścia usuwane są zarówno klasy active, jak i to.

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

Sekwencja wyjścia

Wyjście przebiega podobnie jak wejście, z użyciem klas leave. Często można ponownie wykorzystać tę samą regułę active w obu kierunkach.

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-if a v-show

Obie dyrektywy uruchamiają przejścia. v-if faktycznie montuje i odmontowuje element, natomiast v-show pozostawia go w DOM i przełącza jego właściwość display. W przypadku v-show Vue obsługuje zmianę display wokół aktywnej fazy, dzięki czemu animacja pozostaje widoczna.

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

Pojawianie się przy pierwszym renderowaniu

Domyślnie przejście nie jest uruchamiane podczas pierwszego renderowania. Dodaj właściwość appear, aby animacja wejścia odtworzyła się przy pierwszym zamontowaniu komponentu.

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

Przejście między dwoma elementami

Użyj v-if / v-else wewnątrz jednego komponentu Transition, aby przełączać dwa elementy. Jeśli mają ten sam tag, nadaj każdemu unikatowy key, aby Vue traktowało je jako różne elementy.

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

Ograniczenie ruchu i dostępność

Szanuj preferencje użytkowników, którzy wolą ograniczyć ruch. Wyłączaj lub skracaj przejścia za pomocą zapytania medialnego prefers-reduced-motion, aby animacje nie powodowały dyskomfortu.

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

Szybki test

Co definiuje fade-enter-from?

Podsumowanie

Poznałeś wbudowany komponent <Transition>: opakowuje jeden element przełączany za pomocą v-if/v-show, stosuje sześć klas CSS (enter-from, enter-active, enter-to i ich odpowiedniki leave), obsługuje prefiks name, właściwość appear przy pierwszym renderowaniu oraz mode przy zamianie elementów.

Często zadawane pytania

Czy lekcja „Komponent Transition” jest bezpłatna?

Tak — pełny tekst „Komponent Transition” 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 „Komponent Transition”?

Klasy v-enter-from, v-enter-active, v-enter-to, v-leave-*, właściwość name dla własnych klas. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Komponent Transition”?

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