4 effets de transition Vue Router très sympas, venez les collectionner !-Voir.js-php.cn

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.

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

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.

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

Ajouter la transition de routage Vue au projet

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

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

Copier après la connexion

Dans les anciennes versions de Vue Router, nous pouvions simplement envelopper <transition> avec un composant <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>

Copier après la connexion

Chaque itinéraire a une transition différente

Par défaut, envelopper <transition> avec <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> vers chaque composant individuel au lieu d'utiliser le composant <transition> pour envelopper nos composantes dynamiques. Comme suit :

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

Copier après la connexion

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>

Copier après la connexion

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> 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;
}

Copier après la connexion

最后的效果：

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

2 – Slide Vue Router Transitions

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

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

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

Copier après la connexion

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

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

Copier après la connexion

最后，在过渡样式里为要滑动的组件设置相关的属性。如果需要不同的滑动方向，只需更改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;
}

Copier après la connexion

最终的效果:

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

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>

Copier après la connexion

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


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

Copier après la connexion

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

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

4 – Combining Vue Router Transitions

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

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

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

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

Copier après la connexion

.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);
}

Copier après la connexion

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