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

@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

| CSS transition | CSS animation | |---|---| | Zmiana z A do B | Wiele kroków (keyframes) | | Wymaga zmiany stanu (

-from

-to

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

| Sytuacja | Podejście | |---|---| | Proste fade/slide | CSS transition z named classes | | Wieloetapowe animacje | CSS @keyframes | | Gotowe efekty | Animate.css + custom classes | | Dynamiczne/złożone | GSAP + JS hooks | | Fizyczne symulacje | GSAP z ease functions |

Vai a CodeWorlds→