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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
js实现无缝滚动特效
Dec 20 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
基于vue和bootstrap实现简单留言板功能
May 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下获取http状态的实现代码
2014/05/09 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php简单获取目录列表的方法
2015/03/24 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python Web版语音合成实例详解
2019/07/16 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
使用python求解二次规划的问题
2020/02/29 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
列车长先进事迹材料
2014/01/25 职场文书
教师简历自我评价
2014/02/03 职场文书
房屋租赁意向书
2014/04/01 职场文书
购房意向书
2014/04/01 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python