Comment utiliser les transitions Vue.js pour des animations d’interface utilisateur fluides / Blogs / Perficient

Les animations ne sont pas seulement destinées au spectacle : elles sont essentielles pour rendre les applications Web plus attrayantes et plus conviviales. Dans ce guide, nous explorerons comment ajouter facilement des transitions et des animations fluides à vos applications Vue.js. Qu’il s’agisse d’effets simples ou d’animations avancées avec des bibliothèques comme GSAP, Vue permet de donner vie à votre interface utilisateur en toute simplicité. Allons-y !

Pourquoi utiliser des animations dans les applications Web ?

Les animations améliorent la façon dont les utilisateurs interagissent avec votre application en la rendant plus fluide et plus intuitive. Voici comment procéder :

• Meilleure navigation : Des transitions fluides entre les pages ou les sections aident les utilisateurs à suivre facilement le flux de l’application.
• Expérience plus raffinée : Des animations simples, comme des effets de survol ou des pressions sur des boutons, rendent votre application plus réactive et professionnelle.
• Effacer les commentaires: Les animations peuvent montrer aux utilisateurs quand quelque chose est en cours de chargement, quand il y a une erreur ou quand une action réussit, ce qui permet aux utilisateurs de comprendre plus facilement ce qui se passe.

Animations dans Vue.js

Vue.js offre une prise en charge intégrée pour les deux transitions et animationsce qui facilite l’amélioration de l’interface utilisateur. Ces fonctionnalités sont principalement gérées par le et composants :

• Transitions : Utiliser pour appliquer des animations ou des effets à un seul élément ou composant lorsqu’il entre, quitte ou change d’état.
• Animations : Utiliser pour les animations basées sur des listes, telles que l’ajout, la suppression ou la réorganisation d’éléments dans une liste.

Ces composants fournissent des outils puissants pour contrôler les animations et les transitions de manière fluide et efficace.

1. Le composant

Le Le composant Vue.js vous permet d’appliquer des animations ou des transitions aux éléments lorsqu’ils sont ajoutés, mis à jour ou supprimés du DOM. Il fournit un moyen simple de contrôler l’apparition et la disparition d’éléments avec des effets fluides.

<template>
    <div>
      <button @click="toggle">Toggle</button>
      <transition name="fade">
        <p v-if="show">Hello, Vue.js Animations!</p>
      </transition>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        show: false,
      };
    },
    methods: {
      toggle() {
        this.show = !this.show;
      },
    },
  };
  </script>
  
  <style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }
  </style>

Sortir:

Dans cet exemple :

• fondu-entrée-actif : Contrôle la transition lorsque l’élément entre (apparaît).
• fondu-laisser-actif : Contrôle la transition lorsque l’élément quitte (disparaît).
• fondu-entrer-depuis et fondu-quitter-vers : Définir les états initial et final.

2. Animation de listes avec

Lorsque vous devez animer plusieurs éléments, comme une liste, Vue.js fournit le composant. Il vous permet d’appliquer des transitions ou des animations à chaque élément d’une liste lorsqu’ils sont ajoutés, supprimés ou réorganisés. Le composant est particulièrement utile lorsque vous disposez de listes dynamiques et que vous souhaitez animer des modifications telles que l’ajout, la suppression ou la réorganisation d’éléments.

<template>
    <div>
      <button @click="addItem">Add Item</button>
      <transition-group name="list" tag="ul">
        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
      </transition-group>
    </div>
  </template>  
  <script>
  export default {
    data() {
      return {
        items: ['Item 1', 'Item 2', 'Item 3'],
      };
    },
    methods: {
      addItem() {
        this.items.push(`Item ${this.items.length + 1}`);
      },
    },
  };
  </script>

Sortir:

Ici, applique automatiquement des classes d’animation à chaque élément de la liste lorsqu’il entre ou quitte le DOM.

3. Hooks JavaScript pour les animations personnalisées

Bien que les transitions CSS conviennent aux animations de base, vous avez parfois besoin de plus de contrôle. Vue.js vous permet d’utiliser des hooks JavaScript pour créer des animations personnalisées. Ces hooks vous donnent plus de contrôle sur l’animation, vous permettant de créer des effets complexes que CSS seul ne peut pas faire.

<template>
    <div>
      <button @click="toggle">Toggle Box</button>
      <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
      >
      <div v-if="show" class="box"></div>
      </transition>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        show: false,
      };
    },
    methods: {
      toggle() {
        this.show = !this.show;
      },
      beforeEnter(el) {
        el.style.opacity = 0;
      },
      enter(el, done) {
        el.style.transition = 'opacity 0.5s';
        setTimeout(() => {
          el.style.opacity = 1;
          done();
        }, 50);
      },
      leave(el, done) {
        el.style.transition = 'opacity 0.5s';
        el.style.opacity = 0;
        setTimeout(done, 500);
      },
    },
  };
  </script>

Sortir:

Ce code utilise Vue composant avec des hooks JavaScript pour créer une animation de fondu entrant et sortant pour une boîte. Lorsque le bouton est cliqué, le montrer La propriété contrôle si la boîte est visible ou non.

• avantEntrée définit l’opacité de la boîte à 0 (invisible).
• entrez progressivement augmente l’opacité à 1 (entièrement visible) sur 0,5 seconde.
• partir ramène l’opacité à 0 (invisible) dans la même durée.

Les transitions sont fluides et le fait() La fonction garantit que le timing est correct.

4. Intégration de bibliothèques tierces

Pour des animations plus complexes, les bibliothèques tierces comme Animate.css ou GSAP sont d’excellentes options.

Utilisation d’Animate.css

Animate.css est une bibliothèque CSS populaire qui propose des animations prêtes à l’emploi telles que le fondu, le rebond, le zoom et le glissement. Les développeurs peuvent facilement appliquer ces animations aux éléments Web en ajoutant des classes CSS spécifiques, sans avoir besoin de JavaScript ou de CSS personnalisés. Il est léger, simple à utiliser et fonctionne bien avec des frameworks comme Vue.js pour améliorer l’interface utilisateur.

<template>
    <div>
      <button @click="toggle">Toggle Animation</button>
      <transition
        enter-active-class="animate__animated animate__fadeIn"
        leave-active-class="animate__animated animate__fadeOut">
        <p v-if="show">Hello, Animated World!</p>
      </transition>
    </div>
  </template>  
  <script>
  export default {
    data() {
      return {
        show: false,
      };
    },
    methods: {
      toggle() {
        this.show = !this.show;
      },
    },
  };
  </script>
<style>
@import 'animate.css';
</style>

Sortir:

Dans l’exemple, Animate.css est utilisé avec Vue composant pour ajouter des effets de fondu entrant et sortant à un paragraphe. La méthode toggle contrôle la visibilité du paragraphe en basculant le montrer propriété, tandis que les classes Animate.css prédéfinies gèrent les animations.

Animations avancées avec GSAP

GSAP (GreenSock Animation Platform) est une puissante bibliothèque JavaScript permettant de créer des animations fluides et de haute qualité. Il vous permet d’animer des éléments DOM, des SVG et des canevas avec des fonctionnalités avancées telles que les chronologies et le séquençage. Grâce à son API et ses plugins faciles à utiliser, GSAP vous aide à créer des sites Web interactifs et accrocheurs avec des animations plus complexes que des effets de base.

<template>
<div>
<button @click="toggle">Toggle GSAP Animation</button>
<transition
>
@enter-"enter" @Leave="leave
<div v-if-"show" class="gsap-box"></div> </transition>
</div>
</template>
<script>
import {gsap } from 'gsap';
export default {
data()
{
return {
show: false,
};
},
methods: {
toggle() {
};
},
},
this show this.show;
enter(el, done) (
},
gsap.fromTo(el) { opacity: 0, y: -58 }, { opacity: 1, y: 0, duration: 8.5, onComplete: done });
leave(el, done) {
},
gsap.to(el, { opacity: 0, y: 50, duration: 0.5, onComplete: done });
</script>
<style>
.gsap-box{
 width: 100px;
 height: 100px;
 background-color: green;
}
</style>

Sortir:

Dans cet exemple, nous utilisons GSAP (GreenSock Animation Platform) pour animer une boîte. Quand le « Activer/Activer l’animation GSAP » Lorsque vous cliquez sur le bouton, la boîte apparaît doucement en glissant vers le haut et disparaît en glissant vers le bas lorsqu’elle est masquée.

Meilleures pratiques pour les animations :

1. Gardez les animations subtiles: gardez les animations simples afin qu’elles ne détournent pas l’attention des utilisateurs du contenu principal.
2. Optimiser les performances : Utilisez les propriétés CSS telles que la transformation et l’opacité pour que les animations restent fluides et rapides.
3. Solutions de repli pour l’accessibilité: permettez aux utilisateurs de désactiver les animations s’ils préfèrent moins de mouvement, ce qui rend votre application plus accessible.
4. Test sur tous les appareils: Vérifiez que vos animations fonctionnent bien sur les ordinateurs puissants et sur les téléphones moins puissants pour garantir des performances fluides partout.

Conclusion

Avec Vue.js, ajouter des animations à vos applications Web n’a jamais été aussi simple. Que vous cherchiez à ajouter des effets simples comme des fondus entrants et sortants ou à vous plonger dans des animations plus complexes avec des bibliothèques puissantes comme GSAP, Vue vous offre la flexibilité nécessaire pour améliorer l’expérience utilisateur de votre application. Rendez votre application plus interactive et amusante à utiliser : commencez à expérimenter des animations dès aujourd’hui et faites ressortir vos projets ! Des transitions de base aux effets avancés, Vue dispose de tous les outils dont vous avez besoin pour donner vie à vos idées.