Comment utiliser le composant transition-group pour implémenter les effets de transition d'animation de liste dans Vue

Vue est un framework frontal puissant qui fournit de nombreux composants puissants, y compris le composant transition-group, qui peut nous aider à obtenir des effets de transition d'animation de liste époustouflants. Dans cet article, nous présenterons comment utiliser le composant transition-group de Vue pour obtenir ces effets.

1. Introduction au composant transition-group

Le composant transition-group de Vue est un composant utilisé pour ajouter des effets d'animation lorsque les composants changent. Il peut contenir plusieurs composants ou éléments dans un conteneur et les animer. Grâce au composant transition-group, nous pouvons réaliser une transition d'animation de liste, une transition d'animation de routage et d'autres effets.

2. Implémentez l'effet de transition d'animation de liste

Lors de la mise en œuvre de l'effet de transition d'animation de liste, nous suivons généralement les étapes suivantes :

1. Créez un conteneur contenant la liste et définissez une clé pour celle-ci
2. Utilisez v- Le pour ; la boucle d'instructions restitue chaque élément de la liste ;
3. Définissez une clé pour chaque élément ;
4. Utilisez le composant de groupe de transition pour envelopper ce conteneur ;
5. Définissez un nom pour ce composant de groupe de transition ; effets d'animation d'entrée et de sortie des éléments de liste dans le tableau.
6. Ci-dessous, nous présenterons ce processus en détail à travers un exemple.

L'exemple de code est le suivant :

<template>
  <div>
    <button @click="addItem">添加</button>
    <button @click="removeItem">删除</button>
    <transition-group tag="ul" name="list">
      <li v-for="(item, index) in list" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: "第一项" },
        { id: 2, text: "第二项" },
        { id: 3, text: "第三项" },
      ],
      nextId: 4,
    };
  },
  methods: {
    addItem() {
      this.list.push({ id: this.nextId++, text: `第${this.nextId}项` });
    },
    removeItem() {
      this.list.pop();
    },
  },
};
</script>

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

Nous définissons d'abord un tableau de liste dans data, qui contient trois objets, chaque objet a un identifiant et des attributs de texte. Ensuite, nous utilisons l'instruction v-for dans le modèle pour parcourir chaque élément et définir une clé pour chaque élément. Notez qu'ici, nous utilisons le composant transition-group pour envelopper le conteneur de liste et définir un attribut de nom pour celui-ci.

Dans la feuille de style, nous définissons les effets d'animation d'entrée et de sortie pour les éléments de la liste. En entrant, nous définissons la propriété d'opacité sur 0 pour obtenir l'effet de fondu entrant ; en quittant, nous définissons également la propriété d'opacité sur 0 pour obtenir l'effet de fondu sortant.

Si vous exécutez cet exemple de code, vous verrez que chaque élément de la liste a un effet d'animation à fondu lent. Et lorsque vous cliquez sur le bouton « Ajouter », les éléments de liste nouvellement ajoutés auront également le même effet d'animation. Lorsque vous cliquez sur le bouton "Supprimer", le dernier élément aura également le même effet d'animation.

3. Conclusion

Dans Vue, il est très simple d'utiliser le composant transition-group pour obtenir l'effet de transition d'animation de liste. Avec cet exemple, nous comprenons bien ce processus. J'espère que les lecteurs pourront maîtriser cette compétence et l'utiliser dans le développement réel.

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!