Transition między routami

W NOVA LAB przechodzenie między sekcjami stacji — z centrum dowodzenia do laboratorium, z reaktora do hangaru — powinno być płynne i naturalne. Vue Router wspiera animacje przejść między stronami dzięki integracji z komponentem

<Transition>

.

RouterView + Transition

Aby animować zmianę widoku routera, używasz slot API na

<RouterView>

. Vue Router udostępnia aktualny komponent jako zmienną slotową:

1<RouterView v-slot="{ Component }">
2  <Transition name="page" mode="out-in">
3    <component :is="Component" />
4  </Transition>
5</RouterView>

Jak to działa krok po kroku:

1. <RouterView v-slot="{ Component }">

   — router dostarcza aktualny komponent strony jako

   Component

2. <Transition name="page" mode="out-in">

   — opakowujesz dynamiczny komponent w Transition

3. <component :is="Component" />

   — renderujesz dynamiczny komponent strony

Trzy kluczowe zasady:

• Użyj

  v-slot="{ Component }"

  — nie możesz bezpośrednio owinąć

  <RouterView>

  w

  <Transition>

  (to nie zadziała w Vue 3)
• Zawsze dodaj

  mode="out-in"

  — bez tego stara i nowa strona będą animowane jednocześnie, co wygląda chaotycznie
• Nie dodawaj

  :key

  na

  <component>

  — Vue Router automatycznie reaguje na zmianę routy

Odpowiednie klasy CSS:

1.page-enter-active,
2.page-leave-active {
3  transition: all 0.3s ease;
4}
5
6.page-enter-from {
7  opacity: 0;
8  transform: translateX(20px);
9}
10
11.page-leave-to {
12  opacity: 0;
13  transform: translateX(-20px);
14}

Per-route transitions

Każda sekcja stacji NOVA LAB może mieć inny typ animacji — centrum dowodzenia wsuwa się z lewej, panel alertów wyskakuje z dołu. Użyj pola

meta

w definicji routy, aby przypisać nazwę animacji:

1const routes = [
2  {
3    path: '/dashboard',
4    component: Dashboard,
5    meta: { transition: 'slide-left' }
6  },
7  {
8    path: '/settings',
9    component: Settings,
10    meta: { transition: 'slide-right' }
11  },
12  {
13    path: '/alerts',
14    component: Alerts,
15    meta: { transition: 'slide-up' }
16  }
17]

W template odczytaj nazwę animacji z obiektu

route

:

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

Zwróć uwagę na

|| 'fade'

— to fallback dla routów bez zdefiniowanej animacji. Slot

v-slot

daje dostęp zarówno do

Component

(aktualny komponent strony) jak i

route

(obiekt routy z meta danymi).

Dynamiczne animacje na podstawie kierunku nawigacji

Możesz zmieniać animację w zależności od tego, czy użytkownik nawiguje "w przód" czy "w tył":

1<script setup>
2import { ref } from 'vue'
3import { useRouter } from 'vue-router'
4
5const transitionName = ref('slide-left')
6const router = useRouter()
7
8router.beforeEach((to, from) => {
9  // Porównaj indeksy stron aby określić kierunek
10  const toDepth = to.path.split('/').length
11  const fromDepth = from.path.split('/').length
12
13  transitionName.value = toDepth < fromDepth ? 'slide-right' : 'slide-left'
14})
15</script>
16
17<template>
18  <RouterView v-slot="{ Component }">
19    <Transition :name="transitionName" mode="out-in">
20      <component :is="Component" />
21    </Transition>
22  </RouterView>
23</template>

Z KeepAlive

Możesz łączyć Transition z KeepAlive, aby cache'ować widoki stron. To przydatne gdy użytkownik często przechodzi między tymi samymi sekcjami stacji i nie chcesz tracić stanu (np. pozycji scrolla, wprowadzonych danych):

1<RouterView v-slot="{ Component }">
2  <Transition name="fade" mode="out-in">
3    <KeepAlive :max="5">
4      <component :is="Component" />
5    </KeepAlive>
6  </Transition>
7</RouterView>

Kolejność jest istotna —

<Transition>

na zewnątrz,

<KeepAlive>

wewnątrz. Atrybut

:max="5"

ogranicza liczbę cache'owanych komponentów, aby nie zużywać nadmiernej ilości pamięci.

Uwagi praktyczne

• Animacje przejść między stronami powinny być krótkie (200-400ms) — użytkownik chce szybko zobaczyć treść
• Unikaj ciężkich animacji (np. 3D transforms) na urządzeniach mobilnych
• Testuj animacje na wolniejszych urządzeniach — efekt, który wygląda świetnie na szybkim komputerze, może lagować na tablecie
• Preferuj

  opacity

  i

  transform

  — te właściwości są akcelerowane przez GPU