4 effets de transition Vue Router très sympas, venez les collectionner !

Cet article vous présente 4 très jolis effets de transition de routage Veu. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Les transitions Vue Router sont un moyen rapide et facile d'ajouter de la personnalité à votre application Vue. Il nous permet d'ajouter des effets d'animation/transition fluides entre les différentes pages de l'application.

S'il est utilisé correctement, il peut rendre nos applications plus modernes et professionnelles, améliorant ainsi l'expérience utilisateur.

Dans l'article d'aujourd'hui, nous présentons les bases de la transition à l'aide de Vue Router, puis présentons quelques exemples de base, dans l'espoir de vous donner un peu d'inspiration.

Ci-dessous, nous allons créer quatre pages de transition.

Ajouter la transition de routage Vue au projet

Généralement, la configuration du routeur Vue ressemble à ceci

// default template
<template>
  <router-view />
</template>

Dans les anciennes versions de Vue Router, nous pouvions simplement envelopper <transition></transition> avec un composant <router-view></router-view>.

Cependant, dans la nouvelle version de Vue Router, nous devons utiliser v-slot pour déstructurer nos props et les transmettre à nos slots internes. Ce slow contient un composant dynamique entouré de transition.

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

Chaque itinéraire a une transition différente

Par défaut, envelopper <transition></transition> avec <component></component> ajoutera la même transition sur chaque itinéraire que nous utilisons.

Il existe deux manières différentes de personnaliser les transitions pour chaque itinéraire.

Déplacer la transition vers chaque composant

Tout d'abord, nous pouvons déplacer le <transition></transition> vers chaque composant individuel au lieu d'utiliser le composant <transition></transition> pour envelopper nos composantes dynamiques. Comme suit :

// app.vue
<template>
  <transition>
    <div class="wrapper">
      <!-- -->
    </div>
  </transition>
</template>

Pour chaque itinéraire nous souhaitons avoir un effet de transition, de cette façon nous pouvons personnaliser chaque itinéraire par le nom de la transition.

Transition dynamique utilisant v-bind

Une autre approche consiste à lier le nom de la transition à une variable. Nous pouvons alors modifier dynamiquement cette variable en fonction du parcours d'écoute.

<transition :name="transitionName">
  <component :is="Component" />
</transition>

rrree

Maintenant que nous comprenons les bases de Vue Router Transition, regardons quelques exemples sympas.

1 – Transitions de routeur Fade Vue

La transition de page Fade est probablement l'une des animations les plus couramment utilisées que nous pouvons ajouter à une application Vue.

Nous pouvons obtenir cet effet en changeant le opacity de l'élément.

Tout d'abord, nous créons une transition Vue Router avec un nom fade. Une autre chose à noter est que nous définissons le mode de transition sur out-in.

Il existe trois modes de transition différents :

• default – les transitions d'entrée et de sortie se produisent simultanément
• in-out – la transition pour les nouveaux éléments entre en premier. Ensuite, l’élément actuel disparaît.
• out-in - L'élément actuel sort en premier. Ensuite, de nouveaux éléments font la transition.

Pour que les nouveaux éléments apparaissent en douceur, nous devons supprimer l'élément actuel avant de commencer une nouvelle transition. Nous utilisons donc mode="out-in".

<transition></transition> nous fournit plusieurs classes CSS qui sont ajoutées/supprimées dynamiquement pendant le cycle d'animation.

Il existe 6 classes de transition différentes (3 pour l'entrée et 3 pour la sortie).

• v-enter-from : Définit l'état de départ de la transition. Il prend effet avant l'insertion de l'élément et est supprimé à l'image suivante après l'insertion de l'élément.

• v-leave-from : Définit l'état de départ de la transition de départ. Il prend effet immédiatement lorsque la transition de sortie est déclenchée et est supprimé à l'image suivante.

• v-enter-active : Définit l'état dans lequel la transition prend effet. S'applique tout au long de la transition, prend effet avant l'insertion de l'élément et est supprimé une fois la transition/animation terminée. Cette classe peut être utilisée pour définir des temps de processus, des retards et des fonctions de courbe pour la saisie des transitions.

• v-leave-active : Définit l'état dans lequel la transition de sortie prend effet. S'applique tout au long de la transition de sortie, prend effet immédiatement lorsque la transition de sortie est déclenchée et est supprimé une fois la transition/animation terminée. Cette classe peut être utilisée pour définir des temps de processus, des retards et des fonctions de courbe pour les transitions de sortie.

• v-enter-to : Définir l'état final d'entrée dans la transition. Prend effet à l'image suivante après l'insertion de l'élément (en même temps v-enter-from est supprimé) et est supprimé une fois la transition/animation terminée.

• v-leave-to : Quitter l'état final de la transition. Prend effet à l'image suivante après le déclenchement de la transition de sortie (en même temps v-leave-from est supprimé) et est supprimé une fois la transition/animation terminée.

注意:当我们为过渡提供一个name属性时，这是默认名称。类的格式是name-enter-from、name-enter-active，等等。

我们希望进入和离开状态的opacity 为0。然后，当我们的过渡处生效状态时，对 opacity 进行动画的处理。

// fade styles!
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}


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

最后的效果 ：

2 – Slide Vue Router Transitions

我们要构建的下一个过渡是幻灯片过渡。

模板如下所示。 由于我们希望进入和离开过渡同时发生，因此使用默认模式即可。

// slide transition
<router-view v-slot="{ Component }">
  <transition name="slide">
    <component :is="Component" />
  </transition>
</router-view>

为了让例子更好看，我们给每个页面加上下面的样式：

// component wrapper
.wrapper {
  width: 100%;
  min-height: 100vh;
}

最后，在过渡样式里为要滑动的组件设置相关的属性。如果需要不同的滑动方向，只需更改CSS属性（top, bottom, left, right）。

// slide styles!
.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}


.slide-enter-to {
  position: absolute;
  right: 0;
}


.slide-enter-from {
  position: absolute;
  right: -100%;
}


.slide-leave-to {
  position: absolute;
  left: -100%;
}


.slide-leave-from {
  position: absolute;
  left: 0;
}

最终的效果:

3 – Scale Vue Router Transitions

创建缩放过渡与我们的淡入过渡非常相似。 我们再次将模式设置为 out-in，以便我们可以确保动画的正确顺序。

// scale transition!

<router-view v-slot="{ Component }">
  <transition name="scale" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}


.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

这里给整个网页提供黑色的背景色会让过渡看上去更干净。

4 – Combining Vue Router Transitions

创建过渡的方式有很多很多但是，我认为不要过度过的，刻意的去做过渡。 过渡动效应该是很小的，微妙的增强功能，而不是会让应用产生干扰因素。

我认为实现较好过渡是将一些更基础的过渡结合在一起。

例如，让我们将幻灯片放大和缩小合并为一个过渡。

<router-view v-slot="{ Component }">
  <transition name="scale-slide">
    <component :is="Component" />
  </transition>
</router-view>

.scale-slide-enter-active,
.scale-slide-leave-active {
  position: absolute;
  transition: all 0.85s ease;
}


.scale-slide-enter-from {
  left: -100%;
}


.scale-slide-enter-to {
  left: 0%;
}


.scale-slide-leave-from {
  transform: scale(1);
}


.scale-slide-leave-to {
  transform: scale(0.8);
}

原文地址：https://learnue.co/2021/01/4-awesome-of-vue-router-transitions/

作者：Ahmad shaded

译文地址：https://segmentfault.com/a/1190000039802609

更多编程相关知识，请访问：编程视频！！

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!