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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
js闭包实现按秒计数
Apr 23 Javascript
js实现网页收藏功能
Dec 17 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 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
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
如何学习Python time模块
2020/06/03 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Python多线程的退出控制实现
2020/08/10 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
药品采购员岗位职责
2014/02/08 职场文书
开学寄语大全
2014/04/08 职场文书
社区班子对照检查材料
2014/08/27 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
反邪教观后感
2015/06/11 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python