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 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
JS 实现分页打印功能
May 16 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
JS setTimeout与setInterval的区别
Apr 20 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python time库基本使用方法分析
2019/12/13 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
JVM是一个编译程序还是解释程序
2012/09/11 面试题
幼师自荐信
2013/10/26 职场文书
会计主管岗位职责
2014/01/03 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
八项规定整改措施
2014/02/12 职场文书
自我检讨书范文
2015/01/28 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS