VueRouter过渡动效的示例分析
这篇文章给大家分享的是有关Vue Router过渡动效的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联公司主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、全网整合营销推广、网站程序开发、HTML5响应式成都网站建设、移动网站建设、微商城、网站托管及网页维护、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为成都护栏打桩机行业客户提供了网站推广服务。
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。 它让我们可以在应用程序的不同页面之间添加平滑的动画/过渡效果。
如果使用得当,它可以让我们的应用程序更加现代和专业,从而增强用户体验。
在今天的文章中,我们介绍使用Vue Router过渡的基础知识,然后再介绍一些基本示例,希望能给大家一些启发和灵感。
下面我们要创建的四个过渡页面。
将 Vue 路由过渡添加到项目中
通常,Vue路由器设置如下所示
// default template
在旧版本的Vue Router中,我们可以简单地用
组件包装
。
然而,在Vue Router的新版本中,我们必须使用v-slot
来解构我们的 props
,并将它们传递到我们的内部插槽。这个slow
包含一个被transition
包围的动态组件。
每个 Route 都有不同的过渡
默认情况下,用
包装
将在我们使用的每条路由上添加相同的过渡。
有两种不同的方法可以为每个路由定制转场。
将过 transition 移到各个组件部分
首先,我们可以将
移到每个单独的组件中,而不是用
组件来包装我们的动态组件。 如下:
// app.vue
对于我们想要每个路由都有一个过渡效果,通过这种方式,我们可以通过过渡的名称来定制每个路由。
使用 v-bind 的动态过渡
另一种方法是将过渡的名称绑定到一个变量。然后,我们可以根据监听路由动态地改变这个变量。
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"
。
为我们提供了几个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
为了让例子更好看,我们给每个页面加上下面的样式:
// 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!
.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
创建过渡的方式有很多很多但是,我认为不要过度过的,刻意的去做过渡。 过渡动效应该是很小的,微妙的增强功能,而不是会让应用产生干扰因素。
我认为实现较好过渡是将一些更基础的过渡结合在一起。
例如,让我们将幻灯片放大和缩小合并为一个过渡。
.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); }
感谢各位的阅读!关于“Vue Router过渡动效的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
文章名称:VueRouter过渡动效的示例分析
网页URL:http://pwwzsj.com/article/piieoj.html