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 相关文章推荐
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
php数组和链表的区别总结
2019/09/20 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Python设置默认编码为utf8的方法
2016/07/01 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
安全技术说明书
2014/05/09 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫