Vue Academy · Lekcja

Przejścia i animacje tras

RouterView z Transition, transition-name zależne od trasy oraz przesuwanie i zanikanie między trasami.

Przejścia i animacje tras to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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 przejść między trasami

Po zmianie adresu URL dopasowany komponent jest natychmiast zastępowany. Owijając widok w Vue Transition, można uzyskać płynne przejścia między stronami, takie jak zanikanie lub przesuwanie.

RouterView z v-slot

Aby animować przejście, należy uzyskać dostęp do rozstrzygniętego komponentu. Forma slotu zakresowego komponentu RouterView udostępnia Component i route.

<RouterView v-slot="{ Component }">
  <component :is="Component" />
</RouterView>

Owijanie komponentu w Transition

Należy umieścić komponent dynamiczny component wewnątrz Transition. Vue stosuje klasy wejścia i wyjścia podczas montowania i odmontowywania komponentu trasy.

<RouterView v-slot="{ Component }">
  <Transition name="fade" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

Dlaczego tryb out-in?

Bez opcji mode stara i nowa strona są animowane jednocześnie i nakładają się na siebie. mode="out-in" czeka, aż stara strona zniknie, zanim pojawi się nowa.

Definiowanie CSS

Wartość name staje się prefiksem klasy CSS. Należy zdefiniować przejścia wejścia i wyjścia, aby uzyskać efekt zanikania.

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Przejście zależne od trasy za pomocą meta

Należy zapisać nazwę przejścia w meta trasy, aby różne trasy były animowane na różne sposoby — jedna sekcja może się przesuwać, a inna zanikać.

{ path: '/about', component: About, meta: { transition: 'slide' } }

Obliczanie nazwy przejścia

Należy odczytać route.meta.transition ze slotu i powiązać je z nazwą Transition, używając wartości domyślnej, jeśli to konieczne.

<RouterView v-slot="{ Component, route }">
  <Transition :name="route.meta.transition || 'fade'" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

Przesuwanie kierunkowe

Przejście można wybrać dynamicznie na podstawie kierunku nawigacji — na przykład przesuwać w lewo podczas przechodzenia do przodu i w prawo podczas cofania — porównując głębokość tras w strażniku.

Wejście i wyjście przez przesunięcie

Przesunięcie łączy krycie i transformację. Należy przesunąć wchodzącą stronę z prawej strony, a wychodzącą — w lewo.

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

Wymuszanie zmian parametrów za pomocą key

Jeśli dwie trasy współdzielą ten sam komponent (na przykład /user/1 i /user/2), Vue używa go ponownie i pomija przejście. Należy dodać :key do ścieżki trasy, aby wymusić ponowne renderowanie i animację.

<component :is="Component" :key="route.path" />

Uwzględnianie ograniczonego ruchu

Ze względów dostępności należy wyłączyć animacje, gdy użytkownik preferuje ograniczenie ruchu, używając zapytania medialnego CSS.

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

Szybki test

Proszę sprawdzić wiedzę na temat przejść między trasami.

Podsumowanie

Nauczyli się Państwo animować trasy:

Należy użyć RouterView z v-slot, aby uzyskać Component i route.
Należy owinąć component :is w Transition i użyć mode="out-in".
Należy zdefiniować CSS wejścia i wyjścia powiązany z nazwą przejścia.
Należy odczytywać route.meta.transition, aby definiować animacje dla poszczególnych tras, oraz dodawać :key dla współdzielonych komponentów.

Często zadawane pytania

Czy lekcja „Przejścia i animacje tras” jest bezpłatna?

Tak — pełny tekst „Przejścia i animacje tras” 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 „Przejścia i animacje tras”?

RouterView z Transition, transition-name zależne od trasy oraz przesuwanie i zanikanie między trasami. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Przejścia i animacje tras”?

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