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 数组详解
Oct 10 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
javascript工具库代码
2012/03/29 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
python写xml文件的操作实例
2014/10/05 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
8种常用的Python工具
2020/08/05 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
迟到检讨书900字
2014/01/14 职场文书
经销商订货会主持词
2014/03/27 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
2016年教代会开幕词
2016/03/04 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS