本文摘自PHP中文网，作者青灯夜游，侵删。
本篇文章给大家介绍4个很 Nice 的 Veu 路由过渡动效。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。 它让我们可以在应用程序的不同页面之间添加平滑的动画/过渡效果。
如果使用得当，它可以让我们的应用程序更加现代和专业，从而增强用户体验。
在今天的文章中，我们介绍使用Vue Router过渡的基础知识，然后再介绍一些基本示例，希望能给大家一些启发和灵感。
下面我们要创建的四个过渡页面。
将 Vue 路由过渡添加到项目中
通常，Vue路由器设置如下所示
1 2 3 4 |
|
在旧版本的Vue Router中，我们可以简单地用<transition>组件包装<router-view>。
然而，在Vue Router的新版本中，我们必须使用v-slot来解构我们的 props ，并将它们传递到我们的内部插槽。这个slow包含一个被transition包围的动态组件。
1 2 3 4 5 |
|
每个 Route 都有不同的过渡
默认情况下，用<transition>包装<component>将在我们使用的每条路由上添加相同的过渡。
有两种不同的方法可以为每个路由定制转场。
将过 transition 移到各个组件部分
首先，我们可以将<transition>移到每个单独的组件中，而不是用<transition>组件来包装我们的动态组件。 如下：
1 2 3 4 5 6 7 8 |
|
对于我们想要每个路由都有一个过渡效果，通过这种方式，我们可以通过过渡的名称来定制每个路由。
使用 v-bind 的动态过渡
另一种方法是将过渡的名称绑定到一个变量。然后，我们可以根据监听路由动态地改变这个变量。
1 2 3 |
|
1 2 3 4 5 6 7 |
|
现在，我们了解了Vue Router Transition 的基础知识，下面我们来看一些 Nice 的示例。
1 ?C Fade Vue Router Transitions
添渐隐页面过渡可能是我们可以添加到Vue应用程序中最常用的动效之一。
我们可以通过更改元素的opacity 来实现此效果。
首先，我们创建一个带有fade名称的 Vue Router transition。 还要注意的另一件事是，我们将过渡模式设置为 out-in。
有三种不同的过渡模式:
default?C 进入和离开过渡同时发生in-out?C 新元素的过渡先进入。然后，当前元素过渡出去。out-in- 当前元素先过渡出去。然后，新元素过渡进来。
为了让新元素平滑地淡入，我们需要在开始新的过渡之前删除当前元素。所以我们使用 mode="out-in"。
<transition>为我们提供了几个CSS类，它们在动画周期中被动态添加/删除。
有6个不同的过渡类（3个用于进入，3个用于离开）。
v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter-from被移除)，在过渡/动画完成之后移除。v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave-from被删除)，在过渡/动画完成之后移除。
注意:当我们为过渡提供一个name属性时，这是默认名称。类的格式是name-enter-from、name-enter-active，等等。
我们希望进入和离开状态的opacity 为0。然后，当我们的过渡处生效状态时，对 opacity 进行动画的处理。
1 2 3 4 5 6 7 8 9 10 11 |
|
最后的效果 ：
2 ?C Slide Vue Router Transitions
我们要构建的下一个过渡是幻灯片过渡。
相关阅读 >>
更多相关阅读请进入《vue》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
