Vue-router结合transition实现app前进后退动画切换效果的实例


Posted in Javascript onOctober 11, 2017

一丶首先配置路由并且修改路由配置

路由配置就不讲了重点,给VueRoute添加一个goBack方法,用于记录路由的前进后退状态

this.isBack = true VueRouter.prototype.goBack = function () { 
this.isBack = true

window.history.go(-1)
}

二丶监听路由变化(在路由变化时判断此时的路由状态是前进还是后退)

<template>
<div>



动态绑定路由动画,根据路由状态的不同绑定不同的路由动画分别为 :‘slide-left' 和 'slide-right'



<transition :name="transitionName"> 



<router-view class="Router"></router-view>


</transition>

</div>
</template>

<script>
export default {

data() {


return {



transitionName: 'slide-right' // 默认动态路由变化为slide-right


}

},

watch: {

 '$route' (to, from) {


let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退



if(isBack) {




this.transitionName = 'slide-right'



} else {



 this.transitionName = 'slide-left'


 }

this.$router.isBack = false

}
  }
 }
</script>

三丶给前进后退动画添加不同的动画效果,具体代码如下:

<style>

.Router {
 position: absolute;
 width: 100%;
 transition: all .8s ease;
 top: 40px;
}

.slide-left-enter,
 .slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100% 0);
}
</style>

四丶路由前进的时候按正常方法走就行了;

五丶后退的时候调用goBack方法就OK;

以上这篇Vue-router结合transition实现app前进后退动画切换效果的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 #jQuery
AngularJS中下拉框的高级用法示例
Oct 11 #Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 #Javascript
AngularJS中下拉框的基本用法示例
Oct 11 #Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 #Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 #Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 #Javascript
You might like
php注入实例
2006/10/09 PHP
PHP文件上传实例详解!!!
2007/01/02 PHP
浅析PHP水印技术
2007/02/14 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
python实现爬虫下载美女图片
2015/07/14 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
C语言笔试题
2014/09/04 面试题
积极贯彻学习两会精神总结
2014/03/17 职场文书
解除同居协议书
2015/01/29 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
python 爬取吉首大学网站成绩单
2021/06/02 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android