Analyse d'exemples d'application de fonctions de transition personnalisées dans les documents Vue

La fonction de transition personnalisée Vue est utilisée pour contrôler le comportement spécifique de l'effet de transition lorsque des éléments sont insérés, mis à jour et supprimés. Cette fonction accepte un objet paramètre, y compris l'élément à transitionner, le nom de la classe de transition et la fonction de rappel pour terminer la transition.

Dans Vue, les effets de transition peuvent être obtenus grâce aux noms de classes CSS. Lorsque Vue gère les effets de transition, il ajoute des noms de classes de transition aux éléments dans un certain ordre, déclenchant ainsi des effets d'animation. Par exemple, les noms de classe « v-enter » et « v-enter-active » sont ajoutés lorsque l'élément est inséré et supprimés après l'insertion de l'élément.

Cependant, l'effet de transition par défaut de Vue est un peu monotone et difficile à répondre aux besoins de divers scénarios. À ce stade, nous pouvons utiliser la fonction de transition personnalisée fournie dans Vue pour obtenir un effet de transition plus libre et plus flexible.

Ci-dessous, nous utilisons un exemple pour présenter en détail l'utilisation des fonctions de transition personnalisées.

Exemple de fonction de transition personnalisée

Nous prenons un composant de carrousel d'images comme exemple pour montrer comment utiliser Vue pour personnaliser la fonction de transition. Ce composant peut réaliser un carrousel automatique et une commutation manuelle des images. Nous utiliserons une fonction de transition personnalisée pour obtenir l'effet de transition de l'image.

Modèle de composant

Tout d'abord, nous définissons un modèle de composant de carrousel, qui contient une image d'affichage et un bouton pour changer manuellement d'image :

<template>
  <div class="carousel">
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <img :src="currentImg" key="currentImg" class="image" />
    </transition>
    <div class="button-group">
      <button @click="prev">Prev</button>
      <button @click="next">Next</button>
    </div>
  </div>
</template>

Données et fonctions du composant

Ensuite, nous définissons les données et le calcul des propriétés et du composant méthodes :

<script>
export default {
  data() {
    return {
      imgs: [
        "https://placekitten.com/g/300/200",
        "https://placekitten.com/g/300/210",
        "https://placekitten.com/g/300/220"
      ],
      currentIndex: 0
    };
  },
  computed: {
    currentImg() {
      return this.imgs[this.currentIndex];
    }
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.imgs.length) % this.imgs.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.imgs.length;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      const delay = el.dataset.index * 1000;
      setTimeout(() => {
        el.style.transition = "opacity 1s";
        el.style.opacity = 1;
        done();
      }, delay);
    },
    leave(el, done) {
      el.style.transition = "opacity 1s";
      el.style.opacity = 0;
      setTimeout(() => {
        done();
      }, 1000);
    }
  }
};
</script>

Parmi eux, le tableau imgs contient tous les liens d'image qui doivent être pivotés, et currentIndex représente l'index d'image actuellement affiché. La fonction currentImg renvoie le lien vers l'image actuelle. Les méthodes

prev et next sont utilisées pour changer d'image manuellement. beforeEnter, enter et exit sont des fonctions de transition personnalisées, correspondant respectivement aux effets de transition lors de l'insertion, de la mise à jour et de la suppression d'un élément.

Dans la fonction d'entrée de transition, nous utilisons setTimeout pour obtenir l'effet d'afficher chaque image à différents moments dans le temps. Dans la fonction quitter la transition, nous utilisons une fonction de retard pour attendre la fin de l'effet d'animation avant de détruire le nœud de l'élément.

Résumé

Grâce à l'exemple ci-dessus, nous pouvons voir que dans la fonction de transition personnalisée Vue, nous pouvons contrôler l'implémentation spécifique de l'effet de transition via le paramètre el transmis. Dans le développement réel, nous pouvons personnaliser différentes fonctions de transition en fonction de besoins spécifiques pour obtenir un effet de transition plus flexible et plus libre.

Enfin, il convient de noter que la fonction de transition personnalisée de Vue doit être exécutée avant que le nom de la classe de transition ne soit ajouté à l'élément, sinon aucun effet de transition ne sera déclenché.

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!