用了不少动效，介绍 4个很 Nice 的 Vue 路由过渡动效！

做者：Ahmad shaded 译者：前端小智 来源：sitepoint

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

本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及个人系列文章。

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。

原文：learnue.co/2021/01/4-a…

刷碗

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

本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及个人系列文章。