如何实现vue路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做这个功能,看了看qq、微信都没这样的效果,最后发现segmentfault(思否) 和掘金两个app都有这样的效果,就以此为参考开始做了。
transition
首先看看淡入淡出动画的例子:
<div id="demo"> <button v-on:click="show = !show"> toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
new vue({ el: '#demo', data: { show: true } })
.fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; }
左右切换效果
css部分
我们要实现的是左右切换的效果,所以要定义两种动画(左滑和右滑)
.transitionbody{ transition: all 0.15s ease; /*定义动画的时间和过渡效果*/ } .transitionleft-enter, .transitionright-leave-active { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); /*当左滑进入右滑进入过渡动画*/ } .transitionleft-leave-active, .transitionright-enter { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
html部分
这里的 keep-alive 是vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染dom,我们要把它也包裹在transition标签内,否则页面将重新渲染,切换的动画也会卡顿
<transition :name="transitionname"> <keep-alive> <router-view class="transitionbody"></router-view> </keep-alive> </transition>
js部分
在vue组件中,data必须是一个函数,将对象 {transitionname: ‘transitionleft'} 挂载到vue实例中,然后我们可以监听路由的 to 和 from 来判断此时应该左滑还是右滑,来动态切换transition的name值。
export default { data() { return { transitionname: 'transitionleft' }; }, watch: { '$route' (to, from) { const arr = ['/goods','/ratings','/seller']; const compare = arr.indexof(to.path)>arr.indexof(from.path); this.transitionname = compare ? 'transitionleft' : 'transitionright'; } } }
点击链接体验一下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
vue element 一行代码去掉表格列表 null 排序方式,只保留顺序逆序排序
[日历组件][基于mpvue-calendar]自定可设置出勤信息的日历
Vue提示“[vue-router] Named Route ‘Home‘ has a default child route. When navigating to this named rout“
151Vue-router路由嵌套children+动态匹配路由$route.params+传参数props:true+命名路由
网友评论