Intégration avec des bibliothèques d'animation

Le NOVA LAB utilise des technologies de pointe - hologrammes, interfaces 3D, panneaux de contrôle dynamiques. De la même façon, tu peux enrichir tes animations Vue en les intégrant avec des bibliothèques CSS et JavaScript populaires. Le <Transition> de Vue a été conçu avec cette intégration à l'esprit - le système de noms de classes personnalisés et les hooks JS la rendent simple.

Noms de classes personnalisés

Au lieu des classes automatiques name-enter-active, name-leave-to, etc., tu peux spécifier tes propres classes CSS. C'est essentiel pour l'intégration avec des bibliothèques comme 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">Panneau d'état de la station</div>
6</Transition>

Vue appliquera les classes CSS fournies directement à l'élément au lieu de ses classes automatiques. Tu disposes de 6 attributs de classes personnalisées - un pour chaque phase d'animation :

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

Tu peux mélanger des classes personnalisées avec des transitions nommées - les attributs spécifiés ne remplaceront que les phases sélectionnées, tandis que les autres utiliseront le préfixe name.

CSS @keyframes

En plus de la transition CSS (passage d'une valeur A à B), tu peux utiliser l'animation CSS avec @keyframes - cela te donne le contrôle sur les animations à plusieurs étapes :

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}

L'animation bounce-in se compose de 4 étapes - l'élément grandit, rétrécit légèrement (un effet de « ressort »), puis se stabilise. À la sortie (reverse), l'animation se joue à l'envers.

Différence entre transition et animation

En Vue, tu peux combiner les deux approches. Quand un élément a à la fois transition et animation, utilise l'attribut type pour indiquer à Vue laquelle attendre :

1<Transition name="mixed" type="animation">
2  <!-- Vue attendra la fin de l'animation, pas de la transition -->
3</Transition>

Intégration avec GSAP

GSAP (GreenSock Animation Platform) est la bibliothèque d'animation la plus puissante de l'écosystème JavaScript. L'intégration avec Vue se fait via les hooks JS :

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">Panneau de contrôle du réacteur</div>
8</Transition>

Important : Quand tu utilises GSAP (ou n'importe quelle bibliothèque JS), ajoute :css="false" à Transition pour que Vue n'essaie pas d'appliquer des classes CSS en même temps.

Intégration avec Animate.css

Animate.css est une bibliothèque populaire d'animations CSS prêtes à l'emploi. Après l'avoir ajoutée à ton projet :

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

Son utilisation avec Vue est triviale grâce aux noms de classes personnalisés :

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    Nouvelle lecture de capteur disponible
7  </div>
8</Transition>

Tu peux contrôler la durée via les propriétés personnalisées CSS :

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

Choisir la bonne approche

1<script setup>
2import { ref } from 'vue'
3
4const showBox = ref(false)
5</script>
6
7<template>
8  <div class="nova-lab">
9    <h1>Intégration avec Animate.css</h1>
10
11    <button @click="showBox = !showBox" class="btn">
12      Basculer
13    </button>
14
15    <!-- Noms de classes personnalisés avec 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        Module de cargaison Alpha-7
22        <p>Statut : Chargé</p>
23      </div>
24    </Transition>
25
26    <h2 style="margin-top: 30px;">CSS @keyframes</h2>
27    <button @click="showBox = !showBox" class="btn">Basculer Keyframes</button>
28
29    <Transition name="bounce">
30      <div v-if="showBox" class="cargo-box alt">
31        Module scientifique 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/* animation @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>