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