4个很 丝滑 的 Veu 路由过渡动效
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('/').lengthconst fromDepth = from.path.split('/').lengththis.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);
}
4个很 丝滑 的 Veu 路由过渡动效相关推荐
- Vue 路由 过渡动效 数据获取
过渡动效 <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition><rou ...
- 纯css就能实现可点击切换的轮播图,feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
- 路由的导航守卫过渡动效transtion导航守卫 路由懒加载 路由元信息 @stage3---wee2--day7
# 路由的导航守卫 别名: 导航守卫 路由守卫 路由钩子 路由拦截 作用: - 类似 [保安] 守卫路由 进 举例: 携带数据进 出 举例: 事情完成才能出 导航守卫一共有三种形式 [ 项目三选一 ] ...
- 朱俊彦团队最新论文:用GAN监督学习给左晃右晃的猫狗加表情,很丝滑很贴合...
丰色 发自 凹非寺 量子位 报道 | 公众号 QbitAI GAN又被开发出一项"不正经"用途. 给猫狗加表情: 给马斯克加胡子: 不管视频中的脑袋怎么左晃右晃,这些表情都能始终如 ...
- 「目前最好的文生视频AI」来了!做广告、电影都不在话下,网友:很丝滑
金磊 发自 凹非寺 量子位 | 公众号 QbitAI 家人们,最近又一个文生视频AI火了. 话不多说,直接上效果! 若不说是AI生成的,或许很多朋友都会误以为是<小黄人>又出预告片了吧~ ...
- 国产良心极简版地图软件,地图下载很丝滑,界面简洁无广告
对于从事测绘行业以及一些地图爱好者来说,一幅高清卫星地图非常重要. 但是当前国内所有地图软件均无法直接访问Google Earth影像服务,那么该如何获取一份高清卫星地图呢? 这里需要用到一款国产专业 ...
- 平板如何下载鸿蒙系统,安装了鸿蒙系统的平板,很丝滑很流畅
之前华为鸿蒙 2.0 开发者 Beta 版本公测,有更多的华为设备用户可以参与到公测中来. 4 月 21 日,华为增加 Mate X2.Mate 40 系列.华为智慧屏 S.华为智慧屏 S Pro 及 ...
- activexobject对象不能创建_【设计模式】建造者模式:你创建对象的方式有它丝滑吗?...
目录 什么是建造者模式 为什么要使用建造者模式 构造函数创建对象 set方式构建对象 java实现建造者模式 第一种实现方式 第二种方式 建造者模式与构造函数的对比 建造者模式与工厂模式的对比 总结 ...
- 【设计模式】建造者模式:你创建对象的方式有它丝滑吗?
目录 什么是建造者模式 为什么要使用建造者模式 构造函数创建对象 set方式构建对象 java实现建造者模式 第一种实现方式 第二种方式 建造者模式与构造函数的对比 建造者模式与工厂模式的对比 总结 ...
- 阿里云数据库专家白宸:Redis带你尽享丝滑!(图灵访谈)
访谈嘉宾: 本名郑明杭,现阿里云NoSQL数据库技术专家.先后从事Tair分布式系统.Memcached云服务及阿里云Redis数据库云服务开发,关注分布式系统及NoSQL存储技术前沿. 作为嘉宾,曾 ...
最新文章
- 201521123009 《Java程序设计》第10周学习总结
- python入门练习题-python入门-简单基础题练习
- 解决ubuntu的chkconfig[/sbin/insserv 无法找到路径问题]
- 科大星云诗社动态20210224
- SAP Spartacus里的HTTPErrorInterceptor的设计原理
- 使用SAP WebIDE进行SAP Cloud Platform Business Application开发
- 国行 lg g3 D858 刷 lg g3 D858hk 教程(备忘)
- 《硅谷》大结局 :关上 AI 的潘多拉魔盒
- 浅谈python可视化编程之tkinter(一)
- MAC OS下使用JAVE将amr转mp3的坑
- 使用python读写xlsx格式中的数据【xlrd、pywin32】
- 安川机器人原点丢失_安川机器人报错代码:原点位置校准和操作方法
- abp框架java_asp.net core之abp框架
- 80286 与 80386,实模式与保护模式切换编程
- MobaXterm连接局域网的虚拟机
- android源码AOSP AOKP CM及下载
- java画出马里奥_基于JAVA实现的超级马里奥(Super Mario)游戏
- 网站流量数据分析技巧【转】
- MFC实现交通图导航系统
- python 读取传入参数
热门文章
- 部署外网网站(一)——内网穿透实现外网访问
- android 文件传输 无法复制,Win10坑死安卓!MTP连接大BUG:无法复制、丢文件
- 图扑软件数字孪生 SMT 产线,智能工业可视化管理
- Startup.s文件
- excel 分组统计
- java工程师认证_Java工程师认证工信部考试.doc
- excel两列数据对比找不同_对比excel,轻松学习python数据分析
- 商标有效期、续展期、宽展期分别是什么意思?
- 计算机程序不支持中文文件目录怎么办,电脑软件打开时提示找不到指定路径
- 关于叶子的思维导图_关于叶子的思维导图制作方法