Projekt: System animacji NOVA LAB

Czas połączyć wszystkie techniki animacji w spójny system interfejsu stacji kosmicznej! W tym projekcie stworzysz kompletny dashboard NOVA LAB, który wykorzystuje

<Transition>

<TransitionGroup>

, named transitions, mode out-in, staggered animations, appear i accessibility — wszystko co poznałeś w tym module.

Podsumowanie modułu

W tym module nauczyłeś się:

<Transition>
— animowanie wejścia/wyjścia pojedynczych elementów z 6 klasami CSS
Named Transitions — definiowanie wielu typów animacji z atrybutem
```
name
```
Tryby przejść (mode) — kontrola kolejności animacji przy przełączaniu widoków (
```
out-in
```
,
```
in-out
```
)
JavaScript Animation Hooks — pełna kontrola nad animacjami przez
```
@enter
```
,
```
@leave
```
i callback
```
done()
```
<TransitionGroup>
— animowanie list z
```
v-for
```
, klasa
```
-move
```
dla przesuwania elementów
Integracja z bibliotekami — custom class names dla Animate.css, GSAP przez JS hooks
Route transitions — płynne przejścia między stronami z
```
<RouterView>
```
Appear — animacja przy pierwszym renderowaniu, staggered loading
Accessibility — respektowanie
```
prefers-reduced-motion
```

Wymagania projektu

Zbuduj Animowany Dashboard Stacji NOVA LAB z następującymi elementami:

1. Panel kontrolny z animacją fade

Główny panel, który można pokazać/ukryć przyciskiem. Użyj

<Transition name="fade">

v-if

2. Przełączanie widoków z mode out-in

Wewnątrz panelu zaimplementuj zakładki (np. "Status" i "Alerts"). Przełączanie między nimi powinno używać

<Transition name="slide" mode="out-in">

z dynamicznym

:key

3. Lista alertów z TransitionGroup

W zakładce "Alerts" wyświetlaj listę alertów z możliwością dodawania i usuwania. Użyj

<TransitionGroup name="list">

z klasami enter, leave i move.

4. Staggered loading elementów przy mount

Lista modułów stacji powinna pojawiać się kaskadowo przy załadowaniu aplikacji. Użyj

<TransitionGroup appear :css="false">

z JS hookami i opóźnieniem na podstawie indeksu.

5. Accessibility

Dodaj obsługę

prefers-reduced-motion

— użytkownicy, którzy nie chcą animacji, powinni widzieć natychmiastowe zmiany bez przejść.

Architektura

1App.vue
2├── Toggle Button (show/hide panel)
3├── Panel kontrolny (Transition name="fade")
4│   ├── Tabs (status / alerts)
5│   │   └── Transition name="slide" mode="out-in"
6│   │       ├── Status view
7│   │       │   └── System metrics display
8│   │       └── Alerts view
9│   │           ├── Add alert button
10│   │           └── TransitionGroup name="list"
11│   │               └── Alert items (add/remove)
12│   └── System modules list (TransitionGroup appear :css="false")
13│       └── Staggered items (delay based on index)

Kluczowe wzorce do zastosowania

Zagnieżdżone Transition — fade na panelu, slide na zakładkach, list na alertach
Różne techniki w jednym projekcie — CSS transitions (fade, slide), CSS move (lista), JS hooks (stagger)
TransitionGroup z move — dodawanie alertu na początku listy powoduje płynne przesunięcie reszty
Appear ze stagger — kaskadowe ładowanie modułów daje efekt "włączania systemów stacji"
Callback done() — w JS hookach pamiętaj o wywołaniu
```
done()
```
po zakończeniu animacji

Spróbuj rozbudować projekt o dodatkowe efekty — np. animację bounce dla krytycznych alertów lub efekt pulse dla aktywnych modułów!

Przejdź do CodeWorlds→