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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
Javascript执行流程细节原理解析
May 14 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/11/10 PHP
php实现分页工具类分享
2014/01/09 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
详解rem 适配布局
2018/10/31 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
新大陆软件面试题
2016/11/24 面试题
养殖项目策划书范文
2014/01/13 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
买卖协议书范本
2014/04/21 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
节约用电倡议书
2015/04/28 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
docker-compose部署Yapi的方法
2022/04/08 Servers
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js