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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
详解vue-cli3使用
Aug 14 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
使用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中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
JS array 数组详解
2009/03/22 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
关于python字符串方法分类详解
2019/08/20 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
python反扒机制的5种解决方法
2021/02/06 Python
校园新闻广播稿
2014/01/10 职场文书
运动会广播稿80字
2014/01/23 职场文书
如何写股份合作协议书
2014/09/11 职场文书
三好生演讲稿
2014/09/12 职场文书
英文邀请函
2015/02/02 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
道士塔读书笔记
2015/06/30 职场文书
Python字符串格式化方式
2022/04/07 Python