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学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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文件
2007/01/04 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
初识PHP
2014/09/28 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
理解JS事件循环
2016/01/07 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python 布尔操作实现代码
2013/03/23 Python
Python实现截屏的函数
2015/07/26 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
车间调度岗位职责
2013/11/30 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
新年晚会主持词
2014/03/24 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
交通安全月活动总结
2015/05/08 职场文书
网吧管理制度范本
2015/08/05 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python