Utilisez le composant keep-alive pour obtenir une transition en douceur lors du changement de page Vue

Utilisez le composant keep-alive pour obtenir une transition en douceur lors du changement de page Vue

Dans Vue, l'effet de transition lors du changement de page est une exigence très courante et importante. Vue fournit de nombreux composants d'effet de transition intégrés, dont le composant keep-alive. keep-alive peut conserver l'état du composant lors du changement de composant pour éviter un nouveau rendu, obtenant ainsi un effet de transition en douceur.

Le rôle du composant keep-alive est de conserver le composant qu'il enveloppe en mémoire et de mettre en cache l'instance du composant. Lorsqu'un composant est commuté, l'instance du composant n'est pas détruite, mais est mise en cache afin qu'elle puisse être réutilisée la prochaine fois. De cette manière, un effet de transition en douceur peut être obtenu lorsque les composants sont commutés.

Ce qui suit est un exemple de code qui montre comment utiliser le composant keep-alive pour obtenir un effet de transition en douceur lors du changement de page.

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <transition name="fade" mode="out-in">
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
};
</script>

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

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

Dans le code ci-dessus, il y a deux composants : ComponentA et ComponentB. Basculez le composant actuellement affiché via l'événement click du bouton. Dans la balise de transition, définissez le nom de l'effet de transition sur fade et spécifiez l'attribut mode sur out-in.

Dans la balise keep-alive, le composant dynamique du composant est utilisé pour changer dynamiquement le composant actuellement affiché via l'attribut :is. De cette façon, lorsque les composants sont commutés, les nouveaux composants seront mis en cache et affichés avec un effet de transition fluide. Dans le même temps, pendant le processus de commutation des composants, l'animation de l'effet de transition en fondu sera également déclenchée.

Dans la balise style du code ci-dessus, le style de l'effet de transition est défini. En définissant l'attribut de transition et l'attribut d'opacité, l'effet de fondu entrant et sortant lors du changement de composant est obtenu.

Avec le code ci-dessus, nous pouvons obtenir un effet de transition en douceur lors du changement de composant dans la page Vue. L'utilisation du composant keep-alive peut facilement conserver l'état du composant et obtenir un effet de transition en douceur lors du changement de composant, améliorant ainsi l'expérience utilisateur.

Pour résumer, l'utilisation du composant keep-alive peut obtenir un effet de transition en douceur lors du changement de page Vue. En mettant en cache les composants et en conservant leur état, vous pouvez éviter les rendus inutiles et animer les effets de transition. L'exemple de code ci-dessus peut aider les développeurs à démarrer rapidement et à utiliser de manière flexible le composant keep-alive pour améliorer l'expérience utilisateur de changement de page.

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!