本文已经过原作者 Ahmad shaded 授权翻译。
Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。它让我们可以在应用程序的不同页面之间添加平滑的动画/过渡效果。
如果使用得当,它可以让我们的应用程序更加现代和专业,从而增强用户体验。
在今天的文章中,我们介绍使用Vue Router过渡的基础知识,然后再介绍一些基本示例,希望能给大家一些启发和灵感。
下面我们要创建的四个过渡页面。
通常,Vue路由器设置如下所示
// default template
在旧版本的Vue Router中,我们可以简单地用
然而,在Vue Router的新版本中,我们必须使用v-slot来解构我们的 props ,并将它们传递到我们的内部插槽。这个slow包含一个被transition包围的动态组件。
默认情况下,用
有两种不同的方法可以为每个路由定制转场。
首先,我们可以将
// app.vue
对于我们想要每个路由都有一个过渡效果,通过这种方式,我们可以通过过渡的名称来定制每个路由。
另一种方法是将过渡的名称绑定到一个变量。然后,我们可以根据监听路由动态地改变这个变量。
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 的示例。
添渐隐页面过渡可能是我们可以添加到Vue应用程序中最常用的动效之一。
我们可以通过更改元素的opacity 来实现此效果。
首先,我们创建一个带有fade名称的 Vue Router transition。还要注意的另一件事是,我们将过渡模式设置为 out-in。
有三种不同的过渡模式:
为了让新元素平滑地淡入,我们需要在开始新的过渡之前删除当前元素。所以我们使用 mode="out-in"。
有6个不同的过渡类(3个用于进入,3个用于离开)。
注意:当我们为过渡提供一个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
为了让例子更好看,我们给每个页面加上下面的样式:
// 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;
}
最终的效果:
创建缩放过渡与我们的淡入过渡非常相似。我们再次将模式设置为 out-in,以便我们可以确保动画的正确顺序。
// scale transition!
.scale-enter-active,
.scale-leave-active {
transition: all 0.5s ease;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0.9);
}
这里给整个网页提供黑色的背景色会让过渡看上去更干净。
创建过渡的方式有很多很多但是,我认为不要过度过的,刻意的去做过渡。过渡动效应该是很小的,微妙的增强功能,而不是会让应用产生干扰因素。
我认为实现较好过渡是将一些更基础的过渡结合在一起。
例如,让我们将幻灯片放大和缩小合并为一个过渡。
.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);
}
~完,我是刷碗智, 我要去刷碗了,我们下期见!
原文:https://dmitripavlutin.com/value-vs-reference-javascript/ 作者:Ahmad shaded 译者:前端小智 来源:sitepoint
页面更新:2024-04-27
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号