Comment implémenter des effets de transition et d'animation dans Vue

Vue.js est actuellement l'un des frameworks front-end les plus populaires. Lors de la création d'une interface utilisateur, en plus de prendre en compte des problèmes tels que la fonctionnalité et la présentation, vous devez également réfléchir à la manière d'offrir aux utilisateurs une meilleure expérience utilisateur. Parmi eux, les effets de transition et d’animation constituent une part très importante. Cet article explique comment implémenter des effets de transition et d'animation dans Vue.js, vous permettant d'utiliser ces effets de manière plus flexible dans vos projets.

Transitions et animations dans Vue.js

Vue.js fournit un ensemble d'API de transition et d'animation pratiques et faciles à utiliser, permettant aux développeurs d'implémenter facilement divers effets dans les applications, tels que les fondus d'entrée et de sortie de base, les déplacements, mise à l'échelle, rotation et autres effets, et vous pouvez également personnaliser des effets plus avancés. Les transitions et les animations dans Vue.js peuvent être appliquées dans les aspects suivants :

• peut être appliquée aux effets de transition d'entrée et de sortie des composants ;
• peut être appliquée aux effets d'état de transition des composants ; animations sur les éléments L'effet est obtenu grâce aux méthodes addTransitionClass et removeTransitionClass.
• Ensuite, nous expliquerons ces aspects en détail.

Les effets de transition d'entrée et de sortie des composants

Les effets de transition d'entrée et de sortie des composants font référence aux effets visuels produits par les composants pendant le processus de chargement et de déchargement de la page, également appelés animation d'entrée et animation de sortie. Vue.js fournit le composant de transition pour simplifier ce processus. La méthode d'implémentation spécifique est la suivante :

<template>
  <transition name="fade">
    <div v-if="show">Hello World!</div>
  </transition>
</template>

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

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

Dans le code, nous utilisons un composant de transition nommé fade pour envelopper un élément div et utilisons la directive v-if sur l'élément div pour déterminer son affichage et son état caché. Nous devons également ajouter deux classes, .fade-enter-active et .fade-leave-active, au style pour définir la durée et le type de l'effet de transition. Dans le même temps, vous devez également ajouter les classes .fade-enter et .fade-leave-to pour définir l'état initial et l'état final du composant.

Lorsque la valeur de show passe de false à true, les classes fade-enter et fade-enter-active seront ajoutées à l'élément div, déclenchant ainsi l'effet de transition. Au contraire, lorsque l'état show passe à false, les classes fade-leave et fade-leave-active seront ajoutées à l'élément div, déclenchant ainsi l'effet de transition Leave.

Trois images clés se produiront pendant le processus de transition, à savoir :

Avant le début de la transition, c'est-à-dire que ni l'entrée en fondu ni l'entrée en fondu active ne sont ajoutées à l'élément.

• Lorsque la transition est en cours, fade-enter est ajouté à l'élément, fade-enter-active est également ajouté à l'élément et l'effet d'animation est affiché.
• Lorsque la transition est terminée, c'est-à-dire que fade-enter est supprimé et fade-enter-active est également supprimé. À ce stade, fade-leave est également ajouté à l'élément, fade-leave-active est également ajouté et l'effet d'animation est affiché.
La méthode d'implémentation ci-dessus est un simple effet de fondu d'entrée et de sortie. Si vous avez besoin d'obtenir d'autres effets de transition, vous pouvez y parvenir en modifiant les styles de .fade-enter et .fade-leave-to.

Effets d'état de transition pour les composants

En plus des effets de transition d'entrée et de sortie, des effets d'état de transition peuvent également être définis pour les composants. Par exemple, lorsque le composant est affiché et que la souris survole le composant, nous souhaitons que le composant ait un effet de scintillement, ce qui peut être obtenu en définissant un effet d'état de transition. Le code d'implémentation spécifique est le suivant :

<template>
  <div class="container" @mouseover="startBlink" @mouseleave="stopBlink">
    <transition :name="transitionName">
      <div class="box" :class="{'blink': isBlink}"></div>
    </transition>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.box {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  transition: background-color 1s ease-in-out;
}
.blink {
  animation: blink 1s infinite;
}
@keyframes blink {
  0% {
    background-color: #ff0000;
  }
  50% {
    background-color: #ffff00;
  }
  100% {
    background-color: #ff0000;
  }
}
</style>

<script>
export default {
  data() {
    return {
      isBlink: false,
      transitionName: 'fade'
    }
  },
  methods: {
    startBlink() {
      this.isBlink = true
    },
    stopBlink() {
      this.isBlink = false
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons le composant de transition, mais la valeur de l'attribut name du composant de transition est liée à la variable transitionName. La variable isBlink détermine l'état de clignotement du composant. Dans le même temps, nous avons ajouté une classe Blink à la boîte, et l'état d'utilisation de la classe Blink est déterminé par la variable isBlink. Enfin, nous avons implémenté l'effet clignotant en utilisant des animations CSS3.

Effets d'animation sur les éléments

En plus de pouvoir appliquer des transitions et des animations sur des composants, Vue.js peut également appliquer des effets d'animation à n'importe quel élément via les méthodes addTransitionClass et removeTransitionClass. Ici, nous utiliserons un exemple simple pour démontrer la mise en œuvre de cette méthode.

<template>
  <div class="container">
    <button @click="animate">Animate</button>
    <div class="box" :class="{'animated': animation}" ref="box"></div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}
.animated {
  animation: bounce 1s;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

<script>
export default {
  data() {
    return {
      animation: false
    }
  },
  methods: {
    animate() {
      this.animation = true
      this.$nextTick(() => {
        this.$refs.box.classList.add('animated')
        this.$refs.box.addEventListener('animationend', () => {
          this.animation = false
          this.$refs.box.classList.remove('animated')
        })
      })
    }
  }
}
</script>

Dans le code ci-dessus, nous avons ajouté un événement de clic à un bouton et déclenché l'effet d'animation dans l'événement de clic. Les effets d'animation sont obtenus en ajoutant la classe animée à l'élément, et nous ajoutons et supprimons la classe animée via les méthodes addTransitionClass et removeTransitionClass. Lorsque l'animation se termine, nous devons supprimer manuellement la classe animée.

Résumé

Vue.js fournit un ensemble d'API de transition et d'animation pratiques et faciles à utiliser. Les développeurs peuvent facilement utiliser ces effets pour améliorer l'expérience utilisateur de l'application. Cet article explique comment implémenter des effets de transition et d'animation dans Vue.js, y compris les effets de transition d'entrée et de sortie de composants, les effets d'état de transition de composants et les effets d'animation sur les éléments. Lors de la mise en œuvre de ces effets, vous devez maîtriser certaines compétences de base en CSS3, condition préalable à une meilleure utilisation des transitions et des effets d'animation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!