Maison > interface Web > Voir.js > le corps du texte

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

WBOY
Libérer: 2023-07-22 21:17:27
original
1359 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal