Comment effectuer une transition en vue

L'implémentation de sauts de page dans Vue est l'une des exigences courantes dans le développement front-end. C'est également un bon choix pour implémenter des effets de transition lors des sauts de page pour améliorer l'expérience utilisateur.

Vue propose une variété de façons d'obtenir des effets de transition de page, et nous les présenterons ensuite une par une.

1. Vue animation

Vue animation est une API officiellement fournie par Vue, qui est utilisée pour implémenter des effets de transition dans les composants Vue. L'animation de Vue doit être implémentée via le mécanisme de transition de Vue. La fonction de hook du mécanisme de transition fournit différentes méthodes pour contrôler l'effet de transition, telles que :

• before-enter (avant d'entrer) : avant que l'élément ne soit inséré dans le changement
• enter. (entering) ) : L'état dans lequel l'élément est inséré (startState)
• after-enter (after Entry) : L'état après que le processus d'insertion de l'élément est terminé (endState)
• enter-cancelled (enter-cancelled) : Si le l'entrée est annulée, ce hook sera appelé .

Ce qui suit est un exemple de code qui utilise l'animation Vue pour obtenir des effets de transition :

<transition name="fade">
  <router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

Dans cet exemple, une animation avec un nom égal à "fade" est liée à une vue de routeur afin d'afficher l'effet de transition. , lorsque la nouvelle page est ouverte, elle aura un effet de dégradé et l'opacité augmentera progressivement de 0 à 1 au fil du temps. De même, il y aura un effet de dégradé en quittant l'ancienne page et l'opacité changera progressivement. de 1 à 0 après un certain temps.

2. Implémentation de bibliothèques tierces

Les effets de transition Vue peuvent également être implémentés via des bibliothèques tierces, dont les plus populaires sont les suivantes :

• groupe de transition : utilisé pour chaque composant à interconnecter Situation
• vue-router-transition : utilisé pour les scènes de changement de page
• animated-vue : utilisé pour les effets de transition dans une variété d'autres scènes

transition-group

transition-group peut facilement implémenter des listes et des grilles, etc. Effets de transition animés entre les composants.

<transition-group name="list" tag="p">
  <span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
</transition-group>

Dans cet exemple, un élément span est bouclé et ajouté au groupe de transition, chaque élément a un ensemble d'attributs clés. Ils ont tous le même élément de liste de noms de classe. transition-group ajoutera et supprimera dynamiquement ces éléments pour obtenir des effets de transition.

vue-router-transition

vue-router-transition est utilisé pour implémenter des effets de transition de page dans Vue Router. Pour utiliser vue-router-transition, il vous suffit d'ajouter les noms de classe v-enter et v-leave au composant de routage de Vue Router. Nous pouvons utiliser CSS pour définir ces styles afin d'obtenir des effets de transition.

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

// fade 动画实现方式同上

Dans cet exemple, lorsque deux pages changent, la nouvelle page sera d'abord masquée et placée au-dessus de l'ancienne page, puis utilisera l'animation CSS pour obtenir l'effet de transition d'entrée et de sortie.

animated-vue

animated-vue est une autre bibliothèque utilisée pour implémenter les effets de transition Vue. Elle fournit plusieurs types d'animations (entrée, sortie, boîtes contextuelles, etc.) pour rendre nos transitions de page plus riches.

<transition appear :css="false"
  v-bind:enter-active-class="'animated fadeIn'"
  v-bind:leave-active-class="'animated fadeOut'"
  >
  <router-view></router-view>
</transition>

Dans cet exemple, nous utilisons une bibliothèque CSS appelée "animated" qui fournit plusieurs animations CSS différentes. Nous pouvons utiliser cette bibliothèque avec le mécanisme de transition de Vue pour obtenir des effets de transition de page intéressants.

Résumé

La mise en œuvre d'effets de transition dans Vue peut non seulement apporter une meilleure expérience aux utilisateurs, mais également améliorer l'interactivité et l'esthétique de la page. Vue fournit une variété d'API intégrées et de bibliothèques tierces pour obtenir des effets de transition, et nous pouvons choisir en fonction de différents besoins et scénarios.

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!