Application de la fonction d'effet de transition dynamique dans le document Vue

Vue.js est un framework front-end populaire qui fournit de nombreuses fonctions et outils pratiques pour nous aider à créer des applications interactives et performantes. Parmi elles, la fonction d'effet de transition dynamique est une fonction très pratique du framework Vue, qui nous permet d'obtenir de beaux effets de transition lors de la commutation, de l'ajout ou de la suppression d'éléments DOM. Cet article amènera les lecteurs à avoir une compréhension approfondie de la fonction d'effet de transition dynamique dans le document Vue et à présenter ses techniques d'application pratiques et ses scénarios d'application.

1. Fonction d'effet de transition dynamique dans le document

Dans la documentation du framework Vue, on peut trouver un chapitre dédié à l'animation de transition, qui détaille comment utiliser la fonction d'effet de transition dynamique fournie par Vue pour obtenir l'effet d'animation de transition . Ces fonctions sont les suivantes :

1. enterClass : saisissez le nom de la classe CSS de l'animation.
2. enterActiveClass : Le nom de la classe CSS qui entre dans l'état d'activation de l'animation.
3. enterToClass : Le nom de la classe CSS qui entre dans l'état final de l'animation.
4. leaveClass : Le nom de la classe CSS de l'animation de congé.
5. leaveActiveClass : Le nom de la classe CSS qui quitte l'état actif de l'animation.
6. leaveToClass : Le nom de la classe CSS de l'état final de l'animation de congé.
7. lookingClass : Le nom de la classe CSS de l'animation qui apparaît.
8. lookingActiveClass : Le nom de la classe CSS dans laquelle l'animation est activée.
9. lookingToClass : Le nom de la classe CSS de l'état final de l'animation.

Ces fonctions peuvent être spécifiées dans les propriétés du composant de transition pour obtenir des effets de transition. Par exemple, dans le code suivant, nous pouvons obtenir un simple effet de fondu d'entrée et de sortie en définissant les noms de classe fade-enter-active et fade-leave-active dans le fichier CSS :

<template>
  <div class="fade" v-if="show">
    <p>Hello, Vue!</p>
  </div>
  <button @click="toggle">Toggle</button>
</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,
.fade-leave-to {
  opacity: 0;
}
</style>

2. Compétences pratiques en matière d'application

En plus de l'utilisation de base ci-dessus, la fonction d'effet de transition dynamique peut également être utilisée avec d'autres instructions et composants Vue pour obtenir des effets de transition plus complexes. Voici quelques techniques et scénarios d'application courants :

1. Directive v-bind:class : nous pouvons combiner la directive v-bind:class pour ajouter ou supprimer automatiquement le nom de la classe CSS requis pour l'animation de transition en fonction de l'état du composant. . Par exemple, dans le code suivant, nous pouvons automatiquement ajouter ou supprimer les deux noms de classe CSS fade-enter-active et fade-enter-to en fonction de l'état du spectacle pour obtenir l'effet de fondu d'entrée et de sortie :

<template>
  <div
    class="fade"
    v-bind:class="{ 'fade-enter-active': show, 'fade-enter-to': !show }"
    v-if="show"
  >
    <p>Hello, Vue!</p>
  </div>
  <button @click="toggle">Toggle</button>
</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-to,
.fade-leave-to {
  opacity: 0;
}
</style>

2. composant transition-group : dans certains scénarios où des sous-éléments doivent être ajoutés ou supprimés dynamiquement, nous pouvons utiliser le composant transition-group pour obtenir des effets de transition. Par exemple, dans le code suivant, nous pouvons obtenir l'effet de transition des éléments enfants en spécifiant l'attribut name au composant transition-group et en définissant le nom de classe correspondant dans le fichier CSS :

<template>
  <div>
    <transition-group name="list" tag="ul">
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </transition-group>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    addItem() {
      this.list.push('New Item');
    }
  }
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

3. Effet de défilement : si nous avons besoin L'obtention d'un effet de défilement lors de l'ajout de nouveaux éléments peut être obtenue en utilisant l'attribut ref et la méthode $nextTick. Par exemple, dans le code suivant, nous pouvons utiliser la méthode $nextTick pour faire défiler l'élément conteneur jusqu'à la position du nouvel élément après l'avoir ajouté à la liste :

<template>
  <div ref="listWrapper">
    <transition-group name="list" tag="ul">
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </transition-group>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    addItem() {
      this.list.push('New Item');
      this.$nextTick(() => {
        const listWrapper = this.$refs.listWrapper;
        const newItem = listWrapper.lastElementChild;
        listWrapper.scrollBy({
          top: newItem.offsetTop,
          behavior: 'smooth'
        });
      });
    }
  }
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

3. Résumé

Grâce à l'introduction de cet article, nous pouvons comprendre le framework Vue. La méthode d'utilisation, les compétences d'application pratiques et les scénarios d'application de la fonction d'effet de transition dynamique peuvent nous permettre d'appliquer cette fonction de manière plus flexible et plus efficace pendant le processus de développement, d'obtenir des effets d'animation de transition conviviaux et d'améliorer l'utilisateur. expérience de l'application. Dans le même temps, nous pouvons également utiliser ces techniques et méthodes de manière flexible pour obtenir des effets de transition plus diversifiés et plus naturels en fonction de nos propres besoins et conditions réelles.

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!