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 获取URL参数的插件
Mar 04 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
用React Native制作一个简单的游戏引擎
May 27 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 array_merge下进行数组合并的代码
2008/07/22 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
学习python需要有编程基础吗
2020/06/02 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Python爬取网页信息的示例
2020/09/24 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
Delphi CS笔试题
2014/01/04 面试题
优秀的茶餐厅创业计划书
2014/01/03 职场文书
幼儿园秋游感想
2014/03/12 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
三人合伙协议书范本
2014/10/29 职场文书
校长师德表现自我评价
2015/03/05 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书