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 相关文章推荐
javascript强大的日期函数代码分享
Sep 04 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
JS实现超级好看的鼠标小尾巴特效
Dec 01 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_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python区块及区块链的开发详解
2019/07/03 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
python如何实现图片压缩
2020/09/11 Python
Python高并发和多线程有什么关系
2020/11/14 Python
应届护士推荐信
2013/11/16 职场文书
思想品德课教学反思
2014/02/10 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
《凡卡》教学反思
2014/04/09 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
通知范文怎么写
2015/04/16 职场文书
工作经历证明范本
2015/06/15 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers