Vue.js实现微信过渡动画左右切换效果

前言

在敬畏者上寻找移动端框架的时候意外发现了vux的页面切换效果，后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意，也就看了下源码，这里贴一份备用。

需要用到的技术栈：Vue Vuex

先看看效果图

过渡动画

示例代码

//app。vue过渡：名称=' vux-pop-'(方向==='向前'？'in ' : ' out ')'保持活动路由器-视图类='路由器-视图'/路由器-视图/保持活动/转换脚本从' vuex '导入侧页脚从'导入{ mapState } ./组件/页脚。vue ' export default { name : ' app '，data(){ return { show footer : false } }，components : { sideFooter }，computed: {.mapState({ direction : state=state。风险投资。方向})}，}/scriptstyle作用域vux-弹出-输入-激活vux-弹出-离开-激活vux-pop-in-enter-active .vux-pop-in-leave-active { will-change : transform；过渡：所有250毫秒；高度： 100%;top : 0；绝对位置：背面-可见性：隐藏；透视： 1000;} .vux-弹出-输入{ opa city 3360 0；transform :平移3d(-100%，0，0)；} .vux-弹出-离开-活动{ opa city 3360 0；transform: translate3d(100%，0，0)；} .vux-pop-in-enter { opa city 3360 0；transform: translate3d(100%，0，0)；} .vux-pop-in-leave-active { opa city 3360 0；transform :平移3d(-100%，0，0)；}/style//main。jsconst历史=窗口。会话存储；history.clear()让历史计数=历史。getitem(' count ')* 1 | | 0；history.setItem('/'，0)；路由器. before每个(函数(to，from，next){ const to index=history。getitem(to。路径)；const FrOm index=history。GetItem(来自。路径)；if (toIndex) { if(！fromIndex || parseInt(toIndex，10) parseInt(fromIndex，10)| |(to index==' 0 ' from index==' 0 '){ store。commit(' UPDATE _ DIRECTION '，{ DIRECTION : ' forward ' })else { store。commit(' UPDATE _ DIRECTION '，{ DIRECTION : ' reverse ' })} } else { history count；history.setItem('count '，历史计数)；to.path！=='/' history.setItem(to.path，history count)；store.commit('UPDATE_DIRECTION '，{ DIRECTION : ' forward ' })} next()})；这里还用到了vuex，但是我斯特罗写了很多就不提出来了，主要就是通过更新方向方法更新每一次的路由方向是前进还是后退。

man.js里面主要思想就是给路由增加一个索引存到会话存储里面，以点击过的索引值不变，新增加的路由，索引增加1,同时数到1,这样在页面切换时通过比较索引值的大小，大的向右小的向左，做到左右有规律的过渡。

好了至此一个左右切换的过渡效果就成了，最近由于一直在开发也没怎么更新文章，如果有朋友有好的想法欢迎与我交流。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对我们的支持。