vue-router之实现导航切换过渡动画效果


Posted in Javascript onOctober 31, 2019

过渡动效

提供了transition的封装组件,添加过渡动画,通过添加或删除css类名来实现。

过渡的css类名:

v-enter

进入过渡的开始状态

v-enter-active

进入活动状态

v-enter-to

进入的结束状态

v-leave

离开过渡的开始状态

v-leave-active

离开活动状态

v-leave-to

离开结束状态

过渡模式:

in-out

先进后出

out-in

先出后进

用法:

做一个淡隐淡出效果

把想要运动的元素放到<transition></transition>里面,设置模式。

<transition mode="out-in">
 <router-view class="center"></router-view>
</transition>

在style里写动效:

.v-enter{
 opacity: 0;
}
.v-enter-active{
 transition: 0.5s;
}
.v-enter-to{
 opacity: 1;
}
.v-leave{
 opacity: 1;
}
.v-leave-to{
 opacity:0;
}
.v-leave-active{
 transition: 0.5s;
}

就ok啦!

动态设置name

再做一个x轴向左和向右滑动进入消失效果。

.left-enter{
 transform:translateX(100%);
}
.left-enter-to{
 transform:translateX(0);
}
 
.left-enter-active{
 transition: 1s;
}
.left-leave{
 transform:translateX(0);
}
.left-leave-to{
 transform:translateX(-100%);
}
.left-leave-active{
 transition: 1s;
}

在transition标签中用name动态设置效果。此时要删掉mode="out-in"能自然衔接。

<transition name="left">
  <!--<router-view name="slider"></router-view>-->
  <router-view class="center"></router-view>
 </transition>

向右切换:

.right-enter{
 transform:translateX(-100%);
 }
 .right-enter-active{
 transition: 1s;
 }
 .right-leave-to{
 transform:translateX(100%);
 }
 .right-leave-active{
 transition: 1s;
 }

要想实现左边的向左,右边的向右切换呢

路由元信息

在路由配置中meta可以配置一些数据,用在路由对象中。

访问meta中的数据:$route.meta

也就是说,除了提供的路由配置信息,我们还可以通过meta来自定义想要的数据。

实现左边的向左,右边的向右切换:

step1:给每个组件分别加上index,如果目标路由的index大就向右滑动,否则向左。

meta:{
  index:0
  }

0,1,2,3这样。

step2:监控路由信息对象(上一篇文章中讲过原因),可以拿到离开的和目标的index

watch:{
 $route(to,from){
 console.log(to.meta.index);//目标导航下标
 console.log(from.meta.index);//离开导航下标
 }
}

step3:拿下标,比较设置class名称

watch:{
 $route(to,from){
  if(to.meta.index<from.meta.index){
  this.names="right"
  }else{
  this.names="left"
  }
 }
 },
 data(){
 return{
  index:'/home',
  names:'left'
 }
 }

以上这篇vue-router之实现导航切换过渡动画效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 #Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 #Javascript
vue弹出框组件封装实例代码
Oct 31 #Javascript
使用zrender.js绘制体温单效果
Oct 31 #Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 #Javascript
selenium+java中用js来完成日期的修改
Oct 31 #Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 #Javascript
You might like
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
幼儿园教学管理制度
2014/02/04 职场文书
社会工作专业自荐信
2014/09/26 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL