VueJS - Transition et Animation

Introduction

Salut à toi, futur(e) magicien(ne) de Vue.js ! ? Je suis ravi de devenir ton guide sur ce voyage passionnant à travers le monde magique des transitions et animations dans Vue.js. En tant que quelqu'un qui enseigne l'informatique depuis des années, je peux te dire que rajouter des transitions en douceur et des animations captivantes à tes applications web, c'est comme rajouter des paillettes à un cupcake - ça rend tout plus délicieux !

Ne t'inquiète pas si tu es nouveau dans le monde de la programmation. On va commencer par les bases et progresser pas à pas. D'ici la fin de ce tutoriel, tu seras capable de créer des animations qui feront dire à tes amis : "Waouh, comment as-tu fait ça ?". Alors, plongons dedans !

Transition

Qu'est-ce qu'une Transition ?

Dans le monde du développement web, une transition est comme un changement en douceur d'un état à un autre. Imagine un interrupteur qui ne s'allume pas et s'éteint brusquement, mais au lieu de cela, s'illumine ou s'assombrit progressivement. C'est l'essence d'une transition !

Exemple de Transition de Base

Commençons par un exemple simple. On va créer un bouton qui, lorsque cliqué, affiche ou masque un message avec un effet de fondu en douceur.

<template>
<div>
<button @click="show = !show">Basculer</button>
<transition name="fade">
<p v-if="show">Bonjour, je suis un message en transition !</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

Decomposons cela :

1. Nous avons un bouton qui inverse la variable show lorsque cliqué.
2. Le composant <transition> enveloppe notre message, avec un attribut name défini sur "fade".
3. La directive v-if sur le paragraphe l'affiche ou le masque en fonction de la variable show.
4. Dans la section <style>, nous définissons nos classes de transition :

• .fade-enter-active et .fade-leave-active définissent la durée de transition à 0.5 secondes.
• .fade-enter et .fade-leave-to définissent l'opacité initiale et finale à 0 (invisible).

Lorsque vous cliquez sur le bouton, le message apparaîtra et disparaîtra en douceur. N'est-ce pas génial ?

Animation

Quelle est la Difference Entre une Transition et une Animation ?

While les transitions sont géniales pour des changements d'état simples, les animations permettent des effets plus complexes et multi-étapes. Si une transition est comme éteindre et allumer une lumière en douceur, une animation est comme un spectacle de lumières avec plusieurs couleurs et motifs !

Exemple de Base d'Animation

Créons une animation de balle rebondissante :

<template>
<div>
<button @click="show = !show">Rebondir !</button>
<transition name="bounce">
<p v-if="show">?</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
</style>

Dans cet exemple :

1. Nous utilisons le même mécanisme de bascule de bouton que précédemment.
2. Le composant <transition> a maintenant le nom "bounce".
3. Dans la section <style>, nous définissons :

• .bounce-enter-active applique l'animation bounce-in.
• .bounce-leave-active applique la même animation en sens inverse.
• La règle @keyframes définit notre animation bounce-in avec trois étapes.

Lorsque vous cliquez sur le bouton, la balle apparaîtra avec un effet rebondissant et disparaîtra avec un rebond inversé. Fun, n'est-ce pas ?

Classes de Transition Personnalisées

Vue.js nous donne la flexibilité d'utiliser des classes CSS personnalisées pour nos transitions. C'est super utile lorsque vous souhaitez utiliser des bibliothèques CSS d'animation tierces comme Animate.css.

Voici comment vous pouvez utiliser des classes personnalisées :

<template>
<div>
<button @click="show = !show">Animer !</button>
<transition
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
<p v-if="show">? Jusqu'à l'infini et au-delà !</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
/* Supposons que nous avons importé Animate.css ici */
</style>

Dans cet exemple, nous utilisons directement les classes Animate.css dans notre composant <transition>. Les attributs enter-active-class et leave-active-class nous permettent de spécifier des classes personnalisées pour les animations d'entrée et de sortie.

Durée de Transition Explicite

Parfois, vous pourriez vouloir définir explicitement combien de temps une transition ou une animation doit durer. Vue.js vous permet de faire cela avec le prop :duration :

<template>
<div>
<button @click="show = !show">Mouvement en Slow Motion</button>
<transition :duration="1000">
<p v-if="show">Je bouge en slow motion...</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.v-enter-active, .v-leave-active {
transition: all 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>

Ici, nous définissons la durée à 1000 millisecondes (1 seconde) pour les transitions d'entrée et de sortie. Vous pouvez également définir des durées différentes pour l'entrée et la sortie :

<transition :duration="{ enter: 500, leave: 800 }">
<!-- ... -->
</transition>

Crochets JavaScript

Pour encore plus de contrôle sur vos transitions, Vue.js offre des crochets JavaScript. Ce sont comme de petits assistants qui vous permettent d'exécuter du code à des points spécifiques pendant une transition.

Voici un exemple :

<template>
<div>
<button @click="show = !show">Animer</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<p v-if="show">? Je suis contrôlé par JavaScript !</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
console.log('Avant l\'entrée');
},
enter(el, done) {
console.log('Entrée');
done();
},
afterEnter(el) {
console.log('Après l\'entrée');
},
enterCancelled(el) {
console.log('Entrée annulée');
},
beforeLeave(el) {
console.log('Avant la sortie');
},
leave(el, done) {
console.log('Sortie');
done();
},
afterLeave(el) {
console.log('Après la sortie');
},
leaveCancelled(el) {
console.log('Sortie annulée');
}
}
}
</script>

Ces crochets vous donnent un contrôle précis sur le processus de transition. Vous pouvez les utiliser pour déclencher d'autres animations, mettre à jour des données ou effectuer toute autre action à des points spécifiques de la transition.

Transition à l'Initial Render

Par défaut, les transitions dans Vue.js n'ont lieu que lorsque l'élément est inséré ou supprimé du DOM. Mais que faire si vous souhaitez que l'élément transitionne lors du rendu initial ? Vue.js a prévu le cas avec l'attribut appear :

<template>
<div>
<transition appear>
<p>? J'apparaîs avec une transition !</p>
</transition>
</div>
</template>

<style>
.v-enter-active {
transition: all .3s ease;
}
.v-enter {
opacity: 0;
transform: translateY(-20px);
}
</style>

Avec l'attribut appear, l'élément transitionnera lors de la première rendu du composant.

Animation sur les Composants

Last but not least, parlons des animations sur les composants. La bonne nouvelle est que vous pouvez utiliser toutes les fonctionnalités de transition que nous avons discutées sur vos composants personnalisés également !

<template>
<div>
<button @click="toggleComponent">Changer de Composant</button>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

Dans cet exemple, nous basculons entre deux composants avec une transition de fondu. L'attribut mode="out-in" garantit que le composant ancien transitionne vers l'extérieur avant que le nouveau composant ne transitionne vers l'intérieur.

Conclusion

Waouh, nous avons couvert beaucoup de terrain ! Des transitions de base aux animations complexes, des classes personnalisées aux crochets JavaScript, et même les animations sur les composants. Souviens-toi, la clé pour maîtriser ces concepts, c'est la pratique. Alors, va expérimenter avec ces exemples, mêle différentes techniques, et surtout, amuse-toi !

Les animations et transitions peuvent vraiment rendre tes applications Vue.js vivantes. Ce ne sont pas seulement là pour être jolies (quoique c'est toujours un plus !), mais elles peuvent aussi améliorer l'expérience utilisateur en fournissant des retours visuels et en guidant les utilisateurs à travers ton application.

Continue à explorer, continue à créer, et avant de t'en rendre compte, tu seras le gourou de l'animation dans ton équipe de développement. Bon codage, futurs maîtres de Vue.js ! ?✨

Méthode	Description
transition	Enveloppe un élément ou un composant pour appliquer des transitions d'entrée/sortie
animation	Définit une animation réutilisable qui peut être appliquée aux éléments
enter-active-class	Spécifie une classe CSS personnalisée pour la transition d'entrée
leave-active-class	Spécifie une classe CSS personnalisée pour la transition de sortie
:duration	Définit la durée d'une transition
@before-enter	Crochet JavaScript appelé avant que la transition d'entrée commence
@enter	Crochet JavaScript appelé lorsque la transition d'entrée commence
@after-enter	Crochet JavaScript appelé après que la transition d'entrée est terminée
@enter-cancelled	Crochet JavaScript appelé lorsque la transition d'entrée est annulée
@before-leave	Crochet JavaScript appelé avant que la transition de sortie commence
@leave	Crochet JavaScript appelé lorsque la transition de sortie commence
@after-leave	Crochet JavaScript appelé après que la transition de sortie est terminée
@leave-cancelled	Crochet JavaScript appelé lorsque la transition de sortie est annulée
appear	Applique une transition sur le rendu initial d'un élément
mode	Spécifie le timing des transitions d'entrée/sortie

Credits: Image by storyset