Integration with Animation Libraries

NOVA LAB uses cutting-edge technology - holograms, 3D interfaces, dynamic control panels. Similarly, you can enrich your Vue animations by integrating them with popular CSS and JavaScript libraries. Vue's <Transition> was designed with such integration in mind - the custom class names system and JS hooks make it straightforward.

Custom Class Names

Instead of the automatic classes name-enter-active, name-leave-to, etc., you can specify your own CSS classes. This is crucial when integrating with libraries such as 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">Station status panel</div>
6</Transition>

Vue will apply the provided CSS classes directly to the element instead of its automatic ones. You have 6 custom class attributes at your disposal - one for each animation phase:

• enter-from-class - replaces name-enter-from
• enter-active-class - replaces name-enter-active
• enter-to-class - replaces name-enter-to
• leave-from-class - replaces name-leave-from
• leave-active-class - replaces name-leave-active
• leave-to-class - replaces name-leave-to

You can mix custom classes with named transitions - the specified attributes will override only selected phases, while the rest will use the name prefix.

CSS @keyframes

In addition to CSS transition (changing from value A to B), you can use CSS animation with @keyframes - this gives you control over multi-step animations:

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}

The bounce-in animation consists of 4 steps - the element grows, slightly shrinks (a "spring" effect), and stabilizes. On leave (reverse), the animation plays backwards.

Difference Between transition and animation

In Vue, you can combine both approaches. When an element has both transition and animation, use the type attribute to tell Vue which one to wait for:

1<Transition name="mixed" type="animation">
2  <!-- Vue will wait for the animation to finish, not the transition -->
3</Transition>

Integration with GSAP

GSAP (GreenSock Animation Platform) is the most powerful animation library in the JavaScript ecosystem. Integration with Vue is done through 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>

Important: When using GSAP (or any JS library), add :css="false" to Transition so Vue doesn't try to apply CSS classes simultaneously.

Integration with Animate.css

Animate.css is a popular library of ready-made CSS animations. After adding it to your project:

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

Using it with Vue is trivial thanks to 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>

You can control the duration through CSS custom properties:

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

Choosing the Right Approach

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      Toggle
13    </button>
14
15    <!-- Custom class names 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        Cargo Module Alpha-7
22        <p>Status: Loaded</p>
23      </div>
24    </Transition>
25
26    <h2 style="margin-top: 30px;">CSS @keyframes</h2>
27    <button @click="showBox = !showBox" class="btn">Toggle Keyframes</button>
28
29    <Transition name="bounce">
30      <div v-if="showBox" class="cargo-box alt">
31        Science Module 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/* @keyframes animation */
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>