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个用于离开）。
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 进行动画的处理。
// 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>
为了让例子更好看，我们给每个页面加上下面的样式：
.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… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
Dirty_Paws
- 294
-
xanggang
Vue.js
JavaScript
- 6799
-
VIP.4 融会贯通
公众号 @ 大迁世界 @ B站@前端小智
