Integracja z bibliotekami animacji

NOVA LAB używa najnowszych technologii - hologramy, interfejsy 3D, dynamiczne panele kontrolne. Podobnie Ty możesz wzbogacić swoje animacje Vue, integrując je z popularnymi bibliotekami CSS i JavaScript. Vue <Transition> zostało zaprojektowane z myślą o takiej integracji - system custom class names i JS hooków czyni to prostym.

Custom Class Names

Zamiast automatycznych klas name-enter-active, name-leave-to itd., możesz wskazać własne klasy CSS. To kluczowe przy integracji z bibliotekami takimi jak Animate.css:

1<Transition
2  enter-active-class="animate__animated animate__bounceIn"
3  leave-active-class="animate__animated animate__bounceOut"
4>
5  <div v-if="show">Panel statusu stacji</div>
6</Transition>

Vue zamiast swoich automatycznych klas zastosuje podane klasy CSS bezpośrednio na element. Masz do dyspozycji 6 atrybutów custom class - jeden dla każdej fazy animacji:

• enter-from-class - zastępuje name-enter-from
• enter-active-class - zastępuje name-enter-active
• enter-to-class - zastępuje name-enter-to
• leave-from-class - zastępuje name-leave-from
• leave-active-class - zastępuje name-leave-active
• leave-to-class - zastępuje name-leave-to

Możesz mieszać custom classes z named transitions - podane atrybuty nadpiszą tylko wybrane fazy, a reszta będzie korzystać z prefiksu name.

CSS @keyframes

Oprócz CSS transition (zmiana z wartości A do B), możesz używać CSS animation z @keyframes - daje to kontrolę nad wieloetapowymi animacjami:

1.bounce-enter-active {
2  animation: bounce-in 0.5s;
3}
4.bounce-leave-active {
5  animation: bounce-in 0.5s reverse;
6}
7
8@keyframes bounce-in {
9  0% { transform: scale(0); opacity: 0; }
10  50% { transform: scale(1.15); }
11  70% { transform: scale(0.95); }
12  100% { transform: scale(1); opacity: 1; }
13}

Animacja bounce-in składa się z 4 kroków - element rośnie, lekko się kurczy (efekt "sprężyny") i stabilizuje. Przy wyjściu (reverse) animacja odtwarza się od końca.

Różnica transition vs animation

W Vue możesz łączyć oba podejścia. Gdy element ma zarówno transition jak i animation, użyj atrybutu type aby wskazać Vue, na co czekać:

1<Transition name="mixed" type="animation">
2  <!-- Vue będzie czekać na zakończenie animation, nie transition -->
3</Transition>

Integracja z GSAP

GSAP (GreenSock Animation Platform) to najpotężniejsza biblioteka animacji w ekosystemie JavaScript. Integracja z Vue odbywa się przez JS hooks:

1import gsap from 'gsap'
2
3function onBeforeEnter(el) {
4  el.style.opacity = 0
5  el.style.transform = 'scale(0.5) translateY(30px)'
6}
7
8function onEnter(el, done) {
9  gsap.to(el, {
10    opacity: 1,
11    scale: 1,
12    y: 0,
13    duration: 0.6,
14    ease: 'elastic.out(1, 0.5)',
15    onComplete: done
16  })
17}
18
19function onLeave(el, done) {
20  gsap.to(el, {
21    opacity: 0,
22    scale: 0.5,
23    y: -30,
24    duration: 0.4,
25    ease: 'power2.in',
26    onComplete: done
27  })
28}

1<Transition
2  :css="false"
3  @before-enter="onBeforeEnter"
4  @enter="onEnter"
5  @leave="onLeave"
6>
7  <div v-if="showPanel">Reactor Control Panel</div>
8</Transition>

Ważne: Przy użyciu GSAP (lub jakiejkolwiek biblioteki JS) dodaj :css="false" do Transition, aby Vue nie próbowało jednocześnie stosować klas CSS.

Integracja z Animate.css

Animate.css to popularna biblioteka gotowych animacji CSS. Po dodaniu jej do projektu:

1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

Użycie z Vue jest trywialne dzięki custom class names:

1<Transition
2  enter-active-class="animate__animated animate__fadeInUp"
3  leave-active-class="animate__animated animate__fadeOutDown"
4>
5  <div v-if="visible" class="notification">
6    New sensor reading available
7  </div>
8</Transition>

Możesz kontrolować czas trwania przez CSS custom properties:

1.animate__animated {
2  --animate-duration: 0.4s;
3}

Wybór podejścia

1<script setup>
2import { ref } from 'vue'
3
4const showBox = ref(false)
5</script>
6
7<template>
8  <div class="nova-lab">
9    <h1>Integracja z Animate.css</h1>
10
11    <button @click="showBox = !showBox" class="btn">
12      Przełącz
13    </button>
14
15    <!-- Własne nazwy klas z Animate.css -->
16    <Transition
17      enter-active-class="animate__animated animate__bounceIn"
18      leave-active-class="animate__animated animate__bounceOut"
19    >
20      <div v-if="showBox" class="cargo-box">
21        Moduł ładunkowy Alfa-7
22        <p>Status: Załadowany</p>
23      </div>
24    </Transition>
25
26    <h2 style="margin-top: 30px;">CSS @keyframes</h2>
27    <button @click="showBox = !showBox" class="btn">Przełącz (keyframes)</button>
28
29    <Transition name="bounce">
30      <div v-if="showBox" class="cargo-box alt">
31        Moduł naukowy Beta-3
32      </div>
33    </Transition>
34  </div>
35</template>
36
37<style scoped>
38.nova-lab {
39  background: #0a0e27;
40  color: #00ff88;
41  min-height: 100vh;
42  padding: 20px;
43  font-family: monospace;
44}
45h1, h2 { color: #00ff88; }
46.btn {
47  background: #00b4d8;
48  color: white;
49  border: none;
50  padding: 10px 20px;
51  border-radius: 8px;
52  cursor: pointer;
53  margin: 10px 0;
54}
55.cargo-box {
56  background: rgba(0, 180, 216, 0.15);
57  border: 2px solid #00b4d8;
58  padding: 20px;
59  border-radius: 12px;
60  margin-top: 10px;
61}
62.cargo-box.alt {
63  border-color: #9b59b6;
64  background: rgba(155, 89, 182, 0.15);
65}
66
67/* animacja @keyframes */
68.bounce-enter-active {
69  animation: bounce-in 0.5s;
70}
71.bounce-leave-active {
72  animation: bounce-in 0.5s reverse;
73}
74@keyframes bounce-in {
75  0% { transform: scale(0); }
76  50% { transform: scale(1.15); }
77  100% { transform: scale(1); }
78}
79</style>