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随机颜色代码的多种实现方式
Apr 23 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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的日期与时间函数技巧
2008/04/24 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php date()日期时间函数详解
2010/05/16 PHP
php二维数组排序详解
2013/11/06 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
python实现手势识别的示例(入门)
2020/04/15 Python
python中os包的用法
2020/06/01 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python中pyqtgraph知识点总结
2021/01/26 Python
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
旷课检讨书3000字
2014/02/04 职场文书
党员创先争优活动总结
2014/05/04 职场文书
租车协议书
2015/01/27 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫