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刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
javascript操作css属性
Dec 30 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 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 json_encode中文乱码问题的解决办法
2013/09/09 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
学年末自我鉴定
2014/01/21 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
初中教师个人工作总结
2015/02/10 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书