vue实现app页面切换动画效果实例


Posted in Javascript onMay 23, 2017

因为需要实现类似APP页面切换的动画效果,百度google搜索比较少资料,所以自己写文档,希望对您有用

vue实现app页面切换动画效果实例

在router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

Router.prototype.goBack = function () {
 this.isBack = true
 window.history.go(-1)
}
const router = new Router({
 routes: [
  {
   path: '/',
   name: 'PageTransition', 
   component: PageTransition, // 引入页面切换组件
   children: [{
    path: '',
    component: Index // 父路由访问页面,例如,访问www.aaa.com/ 显示的是Index组件
   }, {
    path: '/pageA',
    component: PageA // 子路由组件 例如,访问www.aaa.com/pageA 显示为PageA
   }, {
    path: '/pageB',
    component: PageB // 子路由组件 例如,访问www.aaa.com/pageB 显示为PageB
   }]
  }
 ]
})

监听路由变化

在放置 <router-view>的vue文件中

//templete  
<transition name='transitionName' keep-alive>
    <router-view></router-view>
  </transition>

//script
  beforeRouteUpdate(to,from,next){
    let isBack = this.$router.isBack;
    if( isBack ){
      this.transitionName = 'slide-right'
    }else{
      this.transitionName = 'slide-left'
    }
    this.$router.isBack = false;
  }
//style
.slide-left-enter, .slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(50px, 0);
 transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(-50px, 0);
 transform: translate(-50px, 0);
}

在需要点击返回的按钮中设置 goback

<div class="left" @click="goback"><</div>

methods: {
  goback () {
   this.$router.goBack()
  }
 }

我自己的github地址 https://github.com/Jaction/page-app-Ainimate

大牛的github地址https://github.com/zhengguorong/pageAinimate

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 #Javascript
JavaScript设置名字输入不合法的实现方法
May 23 #Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 #Javascript
微信小程序request出现400的问题解决办法
May 23 #Javascript
Bootstrap响应式表格详解
May 23 #Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 #Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 #Javascript
You might like
如何用php获取程序执行的时间
2013/06/09 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
python发腾讯微博代码分享
2014/01/10 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
考博专家推荐信
2014/05/10 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
七年级地理教学计划
2015/01/22 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电