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 相关文章推荐
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
js querySelector() 使用方法
Dec 21 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
Angular 作用域scope的具体使用
Dec 11 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
Vue简单实现原理详解
May 07 Javascript
CocosCreator入门教程之网络通信
Apr 16 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学习之 循环结构实现代码
2011/06/09 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
javascript 数组排序函数
2009/08/20 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
Python help()函数用法详解
2014/03/11 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python中的Cookie模块如何使用
2020/06/04 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
自荐信格式范文
2013/10/07 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
《开国大典》教学反思
2014/04/19 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
社会公德演讲稿
2014/05/20 职场文书
个人授权委托书格式
2014/08/30 职场文书
平安家庭事迹材料
2014/12/20 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers