Vue仿微信app页面跳转动画效果


Posted in Javascript onAugust 21, 2019

10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android、iOS、H5,稍加改动还可适配微信小程序。

在使用Vue.js开发移动端页面的时候,默认的组件转场效果过于生硬,根本就没有动画效果。于是我用Vue提供的组件过渡功能,写了个仿微信app页面跳转的动画,以提高用户体验。

废话不多说,直接上图

Vue仿微信app页面跳转动画效果

在600元骁龙632安卓测试机效果流畅。

代码量很少,已上传至GitHub https://github.com/YellowDoing/vue-route-transition

核心代码

<transition :name="this.$store.routeAction">
<router-view/>
</transition>

CSS

.push-enter-active,.push-leave-active
, .pop-enter-active,.pop-leave-active{
transition: all 0.4s;
}
.push-leave-to{
transform: translate(-20%,0);
}
.push-enter {
transform: translate(100%, 0);
}
.push-enter-active {
z-index: 10;
}
.push-leave-active {
z-index: 0;
}
.pop-leave-active {
transform: translate(100%, 0);
z-index: 11;
}
.pop-enter{
transform: translate(-20%,0);
}

Vue.js组件过渡相关文档 https://cn.vuejs.org/v2/guide/transitions.html

总结

以上所述是小编给大家介绍Vue仿微信app页面跳转动画效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
基于游标的分页接口实现代码示例
Nov 12 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 #Javascript
深入理解Vue keep-alive及实践总结
Aug 21 #Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 #Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 #Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 #Javascript
Vue formData实现图片上传
Aug 20 #Javascript
Angular8 Http拦截器简单使用教程
Aug 20 #Javascript
You might like
解析php时间戳与日期的转换
2013/06/06 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
python3 简单实现组合设计模式
2020/07/02 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
运输服务质量承诺书
2014/03/27 职场文书
个人校本研修方案
2014/05/26 职场文书
教师工作表现自我评价
2015/03/05 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL