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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
Javascript面向对象编程
2012/03/18 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
JavaScript中Function详解
2015/02/27 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中逗号的三种作用实例分析
2015/06/08 Python
python cs架构实现简单文件传输
2020/03/20 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
科研先进个人典型材料
2014/01/31 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
政府采购方案
2014/06/12 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
事业单位个人总结
2015/02/12 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
手机销售员岗位职责
2015/04/11 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis