Les transitions et les animations jouent un rôle majeur dans l’expérience de l’utilisateur. En ajoutant des animations et des transitions subtiles entre les éléments d’une page web, vous pouvez améliorer l’expérience de l’utilisateur. Le site web semblera beaucoup plus fluide, plus attrayant et, d’une manière générale, de meilleure qualité.


Ce tutoriel montre comment mettre en œuvre des transitions et des animations dans Vue.js. Vous apprendrez à créer des transitions simples et des animations complexes à l’aide de la fonction transition et les images clés CSS.

Le composant de transition Vue.js

Vue.js dispose d’un composant de transition intégré transition qui vous permet de créer des animations dans votre application. Ce composant s’enroule autour de l’élément cible que nous voulons animer.

Ici, le composant de transition entoure l’en-tête de niveau 1 :

 <transition>
  <h1> Hello </h1>
</transition>

Lorsque vous enveloppez un élément à l’aide de la fonction transition le composant appliquera des classes de transition à l’élément qu’il enveloppe. Il existe six classes de transition au total. Trois d’entre elles contrôlent l’animation de l’élément lorsqu’il entre dans la page. Les trois autres contrôlent l’animation de l’élément lorsqu’il quitte la page.

Lire  Pourquoi Getty Images poursuit un générateur d'art IA

Le code utilisé dans cet article est disponible dans ce dépôt GitHub et est libre d’utilisation sous la licence MIT.

Appliquer des classes de transition lorsque des éléments entrent dans la page

Au cours du processus d’entrée de l’élément dans le DOM, la classe de transition transition Le composant applique les classes entrer-de, enter-toet enter-active à l’élément. Ces classes vous permettent de contrôler la façon dont l’élément s’anime ou transite sur la page.

  • enter-from: S’applique à l’élément avant qu’il n’entre dans un navigateur. Cette classe permet de définir l’état CSS initial de l’élément.
  • enter-to: Appliqué à l’élément lorsqu’il entre dans le navigateur. Cette classe permet de définir l’état CSS final de l’élément.
  • enter-active: S’applique lorsque l’élément passe d’un état à un autre. C’est ici que vous déterminez la durée de la transition.

Voyons un exemple :

 <transition>
  <h1> Hello </h1>
</transition>

.enter-from {
  opacity: 0;
}

.enter-to {
  opacity: 1;
}

.enter-active {
  transition: opacity 2s ease;
}

Avec ce code, l’en-tête de niveau 1 prend deux secondes pour passer de l’état invisible (opacité : 0) à totalement visible (opacité : 1). Cette transition se produit lorsque l’élément entre dans le DOM. Sans cette transition, le texte serait apparu immédiatement sur le navigateur dès le chargement de la page.

Lire  Comment faire un son sur TikTok

Appliquer des classes de transition lorsque les éléments quittent la page

L’application de classes de transition lorsque des éléments quittent la page transition Le composant supporte trois autres classes de transition que vous devez appliquer lorsque l’élément quitte le DOM. Leurs noms sont leave-from, laisser-alleret laisser-actif. Ces classes contrôlent la manière dont l’élément s’anime ou quitte la page.

Comme vous l’avez peut-être deviné, ces classes sont similaires à la classe entrer- dont nous avons parlé précédemment. Mais ces classes ne sont activées que lorsque l’élément est sur le point d’être démonté du DOM. Le montage et le démontage sont des concepts importants du DOM. En tant que développeur, vous devez avoir une compréhension de base du DOM et d’autres concepts connexes.

Voyons un exemple :

 <transition>
  <h1> Hello </h1>
</transition>

.leave-from {
  opacity: 0;
}

.leave-to {
  opacity: 1;
}

.leave-active {
transition: opacity 2s ease;
}

Dans ce cas, l’en-tête de niveau 1 prend deux secondes pour passer lentement de l’état visible (opacité : 1) à invisible (opacité : 0). Cette transition se produit lorsque l’élément quitte le DOM. Sans cette transition, le texte aurait disparu instantanément du navigateur.

Utiliser les noms de transition

Vous pouvez également ajouter un nom à votre composant de transition. Vue ajoutera alors le nom à vos classes de transition. Cela signifie que vous pouvez avoir plusieurs transitions sur votre page, chacune avec des classes de transition et des propriétés CSS uniques.

Lire  L'importance de la formation des employés à la cybersécurité

Par exemple, si vous définissez le nom fade sur votre composant de transition, toutes les classes de transition seront préfixées par le préfixe fade :

 <transition name ="fade">
  <h1> Hello </h1>
</transition>

.fade-enter-from {
  opacity: 1;
}
.fade-leave-from {
  opacity: 1;
}

// other "enter" and "leave" classes with the fade as prefix

Créer des transitions à l’aide du composant Transition

Pour démontrer la transition dans Vue.js, vous allez envelopper un objet de type H1 à l’intérieur de la transition composant. En dessous </transition&gt ;, vous allez créer un bouton. Lorsque ce bouton est cliqué, il fait basculer la variable showTitle entre faux et vrai.

Voici le code :

 <template>
  <transition name="fade">
    <h1 v-if="showTitle"> Hey People </h1>
  </transition>
  <button @click="showTitle = !showTitle"> Toggle </button>
</template>

Ensuite, définissez l’élément script section. Cette section contient le configuration où vous initialisez la méthode showTitle variable avec faux.

 <script>
import {ref} from 'vue'
export default {
  name: "App",
  setup() {
    const showTitle = ref(false)
    return {showTitle}
  } 
};
</script>

Vous devriez maintenant voir le texte et le bouton sur votre navigateur :

Capture d'écran montrant un texte disant Hello people et un bouton

Si vous cliquez deux fois sur le bouton, le texte apparaîtra puis disparaîtra. Mais il n’y aura pas de transition entre les deux états. Ajoutons la transition dans la section des styles :

 <style>
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 2s ease;
}
.fade-leave-from {
  opacity: 1
}
.fade-leave-to {
  opacity: 0
}
.fade-leave-active {
  transition: opacity 2s ease;
}
</style>

Lorsque le bouton est cliqué pour la première fois, vous faites passer le H1 de l’état opaque à l’état visible à l’aide de la propriété .enter classes. Mais lorsque l’on clique à nouveau sur le bouton, on utilise les classes .leave pour faire passer le H1 de visible à invisible.

Les deux séries de transitions durent deux secondes et s’affichent en fondu. Vous pouvez également constater que la classe fondu est ajouté à tous les noms de classe. Si vous ne le faites pas, le code ne fonctionnera pas.

Créer des animations complexes avec les images-clés CSS

Parfois, vous souhaitez que votre animation soit un peu plus complexe. La façon de le faire dans Vue.js est de créer des animations CSS keyframes. Consultez notre guide approfondi sur les animations CSS keyframes si vous souhaitez en savoir plus.

Prenons l’exemple d’une animation d’oscillation. Cette animation fait osciller le H1 de gauche à droite (et vice-versa) lorsqu’il entre dans la page. Le CCS suivant crée une animation d’oscillation à l’aide de la fonction @keyframes directive :

 @keyframes wobble {
 0% { transform: translateY(-60px); opacity: 0}
 50% {transform: translateY(0px); opacity: 1}
 60% {transform: translateX(8px);}
 70% {transform: translateX(-8px);}
 80% {transform: translateX(4px);}
 90% {transform: translateX(-4px);}
 100% {transform: translateX(0px);}
}

Au début de l’animation, le H1 sera caché. À mi-chemin de l’animation (50 %), l’élément H1 sera entièrement visible. Dans les étapes suivantes de l’animation, nous déplaçons le texte de gauche à droite. Cela lui donne un effet d’oscillation.

Ceci applique l’animation à l’élément lorsqu’il entre dans la page :

 .fade-enter-active {
  animation: wobble 0.5s ease;
}

Dans ce cas, l’animation durera une demi-seconde.

En savoir plus sur l’accessibilité dans Vue.js

Nous avons souligné comment les transitions et les animations peuvent améliorer l’expérience utilisateur. Un autre aspect important de l’expérience utilisateur est de rendre votre application plus accessible. Tous les utilisateurs ne sont pas identiques. Certains peuvent avoir des handicaps qui les empêchent de consommer le contenu de votre site web. Il est donc important de rendre votre site accessible également.