Komponent Transition

Witaj w Sali Holograficznej NOVA LAB! Rok 2087 - interfejsy stacji kosmicznej muszą być nie tylko funkcjonalne, ale też elegancko animowane. Gdy Dr. Nova otwiera panel diagnostyczny reaktora, dane nie pojawiają się nagle - płynnie wchodzą na ekran, a po zamknięciu równie gracko znikają. Vue udostępnia wbudowany komponent <Transition>, który pozwala dodawać właśnie takie płynne animacje wejścia i wyjścia elementów.

Czym jest <Transition>?

<Transition> to wbudowany komponent Vue, który automatycznie dodaje i usuwa klasy CSS podczas pojawiania się i znikania elementu. Nie renderuje żadnego dodatkowego elementu DOM - jest "niewidzialnym opakowaniem":

1<Transition name="fade">
2  <div v-if="showPanel">Panel statusu stacji</div>
3</Transition>

Gdy showPanel zmieni się z false na true, Vue doda odpowiednie klasy CSS do elementu <div>, uruchamiając animację wejścia. Gdy wartość zmieni się z powrotem na false, Vue uruchomi animację wyjścia, a dopiero po jej zakończeniu usunie element z DOM.

Ważne ograniczenie: <Transition> opakowuje dokładnie jeden element lub komponent. Jeśli potrzebujesz animować listę - użyj <TransitionGroup> (poznasz go w dalszej części modułu).

6 klas CSS Transition

Vue automatycznie dodaje i usuwa 6 klas CSS podczas cyklu życia animacji. To fundament zrozumienia systemu przejść:

Wejście (enter) - gdy element się pojawia:

• v-enter-from - stan początkowy wejścia. Dodawana przed wstawieniem elementu, usuwana po jednej klatce.
• v-enter-active - aktywna przez cały czas trwania wejścia. Tu definiujesz transition lub animation.
• v-enter-to - stan końcowy wejścia. Dodawana po jednej klatce (gdy -from jest usuwana), usuwana po zakończeniu animacji.

Wyjście (leave) - gdy element znika:

• v-leave-from - stan początkowy wyjścia. Dodawana natychmiast po wywołaniu wyjścia.
• v-leave-active - aktywna przez cały czas trwania wyjścia.
• v-leave-to - stan końcowy wyjścia. Dodawana po jednej klatce, usuwana po zakończeniu animacji.

Sekwencja zdarzeń wygląda tak:

1Wejście: enter-from → (1 klatka) → enter-to + enter-active → (koniec animacji) → cleanup
2Wyjście: leave-from → (1 klatka) → leave-to + leave-active → (koniec animacji) → element usunięty

Prosty efekt fade

Najprostszy i najczęściej używany efekt - płynne pojawianie się i znikanie:

1.fade-enter-active,
2.fade-leave-active {
3  transition: opacity 0.5s ease;
4}
5
6.fade-enter-from,
7.fade-leave-to {
8  opacity: 0;
9}

Klasy -from i -to definiują stany początkowe i końcowe (w tym przypadku: opacity: 0 dla niewidoczności). Klasy -active definiują czas trwania, typ easingu i które właściwości animować.

Efekt slide (przesuwanie)

Animacje mogą łączyć wiele właściwości CSS jednocześnie:

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

Element wchodzi przesuwając się z góry, a wychodzi przesuwając się w dół - jak panel alarmowy na stacji NOVA LAB, który spada z góry ekranu.

v-if vs v-show z Transition

<Transition> działa zarówno z v-if jak i v-show, ale ich zachowanie jest różne:

• v-if - element jest fizycznie dodawany i usuwany z DOM. Animacja wyjścia kończy się dopiero przed usunięciem elementu. Lepsze dla elementów, które rzadko się przełączają.
• v-show - element zawsze jest w DOM, tylko zmienia się display: none. Szybsze przełączanie, lepsze dla elementów które często się pojawiają i znikają (np. panel alertów).

1<template>
2  <div class="control-panel">
3    <button @click="showStatus = !showStatus">Toggle Panel</button>
4
5    <!-- v-if: element dodawany/usuwany z DOM -->
6    <Transition name="fade">
7      <div v-if="showStatus" class="status-panel">
8        Reactor status: ONLINE
9      </div>
10    </Transition>
11
12    <!-- v-show: element zawsze w DOM, zmiana display -->
13    <Transition name="fade">
14      <div v-show="showAlert" class="alert-panel">
15        Warning: temperature rising!
16      </div>
17    </Transition>
18  </div>
19</template>
20
21<script setup>
22import { ref } from 'vue'
23
24const showStatus = ref(true)
25const showAlert = ref(false)
26</script>

Kiedy używać Transition?

• Pokazywanie/ukrywanie modali, tooltipów, dropdownów
• Przełączanie między widokami (v-if/v-else)
• Animowanie wejścia elementu przy załadowaniu
• Ostrzeżenia i powiadomienia na stacji kosmicznej

1<script setup>
2import { ref } from 'vue'
3
4const showPanel = ref(true)
5</script>
6
7<template>
8  <div class="nova-lab">
9    <h1>NOVA LAB - demo Transition</h1>
10
11    <button @click="showPanel = !showPanel" class="btn">
12      {{ showPanel ? 'Ukryj panel' : 'Pokaż panel' }}
13    </button>
14
15    <Transition name="fade">
16      <div v-if="showPanel" class="status-panel">
17        <h3>Status stacji</h3>
18        <p>Systemy: Operacyjne</p>
19        <p>Temperatura: -63°C</p>
20        <p>Ciśnienie: 0.6 kPa</p>
21      </div>
22    </Transition>
23  </div>
24</template>
25
26<style scoped>
27.nova-lab {
28  background: #0a0e27;
29  color: #00ff88;
30  min-height: 100vh;
31  padding: 20px;
32  font-family: monospace;
33}
34h1 { color: #00ff88; margin-bottom: 20px; }
35
36.btn {
37  background: #00b4d8;
38  color: white;
39  border: none;
40  padding: 10px 20px;
41  border-radius: 8px;
42  cursor: pointer;
43  font-size: 14px;
44  margin-bottom: 15px;
45}
46
47.status-panel {
48  background: rgba(0, 180, 216, 0.1);
49  border: 2px solid #00b4d8;
50  padding: 20px;
51  border-radius: 12px;
52}
53
54/* Klasy Transition */
55.fade-enter-active,
56.fade-leave-active {
57  transition: opacity 0.5s ease;
58}
59
60.fade-enter-from,
61.fade-leave-to {
62  opacity: 0;
63}
64</style>