共计 4084 个字符,预计需要花费 11 分钟才能阅读完成。
作者: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 个用于来到)。
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>
为了让例子更好看,咱们给每个页面加上上面的款式:
// 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 曾经收录,欢送 Star。