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


Posted in Javascript onJune 13, 2017

前言

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

需要用到的技术栈:Vue+Vuex

先看看效果图

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

示例代码

//app.vue
<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
 <keep-alive>
 <router-view class="router-view" ></router-view>
 </keep-alive>
</transition>
<script>
 import { mapState } from 'vuex'
 import sideFooter from "./components/Footer.vue"

 export default {
 name: 'app',
 data () {
 return {
 showFooter : false
 }
 },
 components : {
 sideFooter
 },
 computed:{
 ...mapState({
 direction: state => state.mutations.direction
 })
 },
 }
</script>

<style scoped>
 .vux-pop-out-enter-active,
 .vux-pop-out-leave-active,
 .vux-pop-in-enter-active,
 .vux-pop-in-leave-active {
 will-change: transform;
 transition: all 250ms;
 height: 100%;
 top: 0;
 position: absolute;
 backface-visibility: hidden;
 perspective: 1000;
 }

 .vux-pop-out-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
 }

 .vux-pop-out-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
 }

 .vux-pop-in-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
 }

 .vux-pop-in-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
 }
</style>
// main.js
const history = window.sessionStorage;
history.clear()
let historyCount = history.getItem('count') * 1 || 0;
history.setItem('/', 0);

router.beforeEach(function (to, from, next) {

 const toIndex = history.getItem(to.path);
 const fromIndex = history.getItem(from.path);

 if (toIndex) {
 if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
 store.commit('UPDATE_DIRECTION', {direction: 'forward'})
 } else {
 store.commit('UPDATE_DIRECTION', {direction: 'reverse'})
 }
 } else {
 ++historyCount;
 history.setItem('count', historyCount);
 to.path !== '/' && history.setItem(to.path, historyCount);
 store.commit('UPDATE_DIRECTION', {direction: 'forward'})
 }
 next()
});

这里还用到了vuex,但是我stroe写了很多就不提出来了,主要就是通过 UPDATE_DIRECTION方法更新每一次的路由方向是前进还是后退。

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

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

总结

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

Javascript 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 #Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 #Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 #Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 #Javascript
深究AngularJS中$sce的使用
Jun 12 #Javascript
JS身份证信息验证正则表达式
Jun 12 #Javascript
用原生JS实现简单的多选框功能
Jun 12 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python的re模块应用实例
2014/09/26 Python
python生成二维码的实例详解
2017/10/29 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
机工车间主任岗位职责
2014/03/05 职场文书
网络管理专业求职信
2014/03/15 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
业务员辞职信范文
2015/03/02 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
500字作文之难忘的同学
2019/12/20 职场文书