Named Transitions i tryby przejść

W NOVA LAB mamy wiele paneli — panel diagnostyczny reaktora wsuwa się z boku, panel alertów pojawia się z efektem fade, a panel nawigacji zjeżdża z góry. Vue pozwala nazywać Transition, co zmienia prefiksy klas CSS i umożliwia definiowanie wielu różnych animacji w jednej aplikacji.

Named Transitions

Domyślnie

<Transition>

używa prefiksu

v-

dla klas CSS. Atrybut

name

zmienia ten prefiks na wybraną nazwę:

1<Transition name="slide">
2  <div v-if="visible">...</div>
3</Transition>

Teraz klasy to:

slide-enter-from

,

slide-enter-active

,

slide-enter-to

,

slide-leave-from

,

slide-leave-active

,

slide-leave-to

.

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

Dzięki named transitions możesz mieć jednocześnie wiele typów animacji:

1<template>
2  <!-- Panel reaktora — wsuwa się z prawej -->
3  <Transition name="slide-right">
4    <div v-if="showReactor">Reactor Panel</div>
5  </Transition>
6
7  <!-- Alert — pojawia się z efektem fade -->
8  <Transition name="fade">
9    <div v-if="showAlert">Alert!</div>
10  </Transition>
11
12  <!-- Menu — zjeżdża z góry -->
13  <Transition name="slide-down">
14    <nav v-if="showMenu">Navigation</nav>
15  </Transition>
16</template>

1/* Fade */
2.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
3.fade-enter-from, .fade-leave-to { opacity: 0; }
4
5/* Slide z prawej */
6.slide-right-enter-active, .slide-right-leave-active { transition: all 0.4s ease; }
7.slide-right-enter-from { transform: translateX(100%); opacity: 0; }
8.slide-right-leave-to { transform: translateX(100%); opacity: 0; }
9
10/* Slide z góry */
11.slide-down-enter-active, .slide-down-leave-active { transition: all 0.3s ease; }
12.slide-down-enter-from { transform: translateY(-100%); opacity: 0; }
13.slide-down-leave-to { transform: translateY(-100%); opacity: 0; }

Tryby przejść (mode)

Gdy przełączasz się między dwoma elementami w jednym

<Transition>

, domyślnie oba animują się jednocześnie — stary wychodzi, a nowy wchodzi w tym samym czasie. To często wygląda chaotycznie. Atrybut

mode

kontroluje kolejność:

• mode="out-in"

  — stary element wychodzi i dopiero po zakończeniu jego animacji nowy wchodzi. To najczęściej używany tryb — zapobiega "skakaniu" layoutu.

• mode="in-out"

  — nowy element wchodzi, a stary wychodzi dopiero potem. Rzadko używany, ale przydatny np. do efektu nakładania się.
• Brak mode — oba elementy animują się jednocześnie. Może powodować problemy z layoutem.

1<template>
2  <div class="view-switcher">
3    <button @click="currentView = currentView === 'status' ? 'alerts' : 'status'">
4      Switch View
5    </button>
6
7    <Transition name="fade" mode="out-in">
8      <div v-if="currentView === 'status'" key="status" class="panel">
9        System Status: All nominal
10      </div>
11      <div v-else key="alerts" class="panel">
12        Active Alerts: 3
13      </div>
14    </Transition>
15  </div>
16</template>
17
18<script setup>
19import { ref } from 'vue'
20
21const currentView = ref('status')
22</script>

Ważne: Przy przełączaniu elementów tego samego typu HTML (np. dwa

<div>

) musisz użyć

:key

, aby Vue wiedział, że to różne elementy i powinien uruchomić animację przejścia. Bez

:key

Vue zoptymalizuje rendering i nie wykona animacji.

Przełączanie komponentów

mode="out-in"

świetnie działa z dynamicznymi komponentami:

1<template>
2  <Transition name="slide" mode="out-in">
3    <component :is="currentTab" />
4  </Transition>
5</template>
6
7<script setup>
8import { shallowRef } from 'vue'
9import StatusPanel from './StatusPanel.vue'
10import AlertsPanel from './AlertsPanel.vue'
11
12const currentTab = shallowRef(StatusPanel)
13</script>

Praktyczna wskazówka

Dla prostych przełączeń między widokami,

mode="out-in"

z animacją fade to najbardziej eleganckie rozwiązanie. Unikaj

mode="in-out"

chyba że masz konkretny powód (np. nakładający się efekt slide). Brak mode sprawdza się głównie gdy oba elementy mają

position: absolute

i nie wpływają na layout.