作者：Ahmad shaded
译者：前端小智
起源：sitepoint

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

Vue Router 过渡是向Vue应用程序增加共性的一种疾速简便的办法。 它让咱们能够在应用程序的不同页面之间增加平滑的动画/过渡成果。

如果应用切当，它能够让咱们的应用程序更加古代和业余，从而加强用户体验。

在明天的文章中，咱们介绍应用Vue Router过渡的基础知识，而后再介绍一些根本示例，心愿能给大家一些启发和灵感。

上面咱们要创立的四个过渡页面。

将 Vue 路由过渡增加到我的项目中

通常，Vue路由器设置如下所示

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

在旧版本的Vue Router中，咱们能够简略地用<transition>组件包装<router-view>。

然而，在Vue Router的新版本中，咱们必须应用v-slot来解构咱们的 props ，并将它们传递到咱们的外部插槽。这个slow蕴含一个被transition突围的动静组件。

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

每个 Route 都有不同的过渡

默认状况下，用<transition>包装<component>将在咱们应用的每条路由上增加雷同的过渡。

有两种不同的办法能够为每个路由定制转场。

将过 transition 移到各个组件局部

首先，咱们能够将<transition>移到每个独自的组件中，而不是用<transition>组件来包装咱们的动静组件。 如下：

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

对于咱们想要每个路由都有一个过渡成果，通过这种形式，咱们能够通过过渡的名称来定制每个路由。

应用 v-bind 的动静过渡

另一种办法是将过渡的名称绑定到一个变量。而后，咱们能够依据监听路由动静地扭转这个变量。

<transition :name="transitionName">  <component :is="Component" /></transition>
watch: {  '$route' (to, from) {    const toDepth = to.path.split('/').length    const fromDepth = from.path.split('/').length    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'  }}

当初，咱们理解了Vue Router Transition 的基础知识，上面咱们来看一些 Nice 的示例。

1 – Fade Vue Router Transitions

添渐隐页面过渡可能是咱们能够增加到Vue应用程序中最罕用的动效之一。

咱们能够通过更改元素的opacity 来实现此成果。

首先，咱们创立一个带有fade名称的 Vue Router transition。 还要留神的另一件事是，咱们将过渡模式设置为 out-in。

有三种不同的过渡模式:

  • default – 进入和来到过渡同时产生
  • in-out – 新元素的过渡先进入。而后，以后元素过渡进来。
  • out-in - 以后元素先过渡进来。而后，新元素过渡进来。

为了让新元素平滑地淡入，咱们须要在开始新的过渡之前删除以后元素。所以咱们应用 mode="out-in"。

<transition>为咱们提供了几个CSS类，它们在动画周期中被动静增加/删除。

有6个不同的过渡类（3个用于进入，3个用于来到）。

  1. v-enter-from：定义进入过渡的开始状态。在元素被插入之前失效，在元素被插入之后的下一帧移除。
  2. v-leave-from：定义来到过渡的开始状态。在来到过渡被触发时立即失效，下一帧被移除。
  3. v-enter-active：定义进入过渡失效时的状态。在整个进入过渡的阶段中利用，在元素被插入之前失效，在过渡/动画实现之后移除。这个类能够被用来定义进入过渡的过程工夫，提早和曲线函数。
  4. v-leave-active：定义来到过渡失效时的状态。在整个来到过渡的阶段中利用，在来到过渡被触发时立即失效，在过渡/动画实现之后移除。这个类能够被用来定义来到过渡的过程工夫，提早和曲线函数。
  5. v-enter-to：定义进入过渡的完结状态。在元素被插入之后下一帧失效 (与此同时 v-enter-from 被移除)，在过渡/动画实现之后移除。
  6. v-leave-to：来到过渡的完结状态。在来到过渡被触发之后下一帧失效 (与此同时 v-leave-from 被删除)，在过渡/动画实现之后移除。

留神:当咱们为过渡提供一个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);}

~完，我是刷碗智， 我要去刷碗了，咱们下期见！

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://learnue.co/2021/01/4-...

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。