vue页面动态切换_vue 首页 切换动态画面-程序员宅基地

技术标签: vue  

Vue-router结合transition实现app前进后退动画切换效果

首先,配置路由并且修改路由配置

配置路由的重点是给Router添加一个goBack方法,用于记录路由的前进状态 this.isBack = true

Router.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;

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/elijip/article/details/81698937

智能推荐

英语——句子结构和成分大全_英语成分 do oc-程序员宅基地

文章浏览阅读7.5k次,点赞16次,收藏62次。句子在上面简单句五种句型句中起名词作用,充当主语、宾语、表语和同位语等的各种从句,统称为名词性从句。c. 表变化:become, grow, turn, go, get, fall;b. 表感官:feel, smell, sound, taste, look;d. 表状态:remain, keep, hold, stay, seem.宾语是谓语动词动作的承受者。并列句中的各个简单句彼此独立,互不依从,但它们表达的意思之间有一定的关系。a. be 动词,am, is, are, was, were;_英语成分 do oc

ORA-00439: feature not enabled: Partitioning-程序员宅基地

文章浏览阅读485次。在进行数据库备份导入的时候遇到如下问题:IMP-00003: ORACLE error 439 encounteredORA-00439: feature not enabled: Partitioning查询v$option视..._imp-00003: oracle error 439 encountered ora-00439: feature not enabled: part

android 在设备上安装apk包_安卓安装包绑设备-程序员宅基地

文章浏览阅读355次。使用adb 命令安装1 打开cmd 命令 win+r 输入cmd 命令 打开控制面板输入adb install 然后把把apk 拖拽进去然后回车即可 安装2 adb 卸载apk输入adb uninstall + 包名 即可。。..._安卓安装包绑设备

antv/g6图表决策代码_antv g6 经纬度-程序员宅基地

文章浏览阅读516次。antv/g6在react项目使用js引用_antv g6 经纬度

redis排行榜_java_【Redis 源码日志】- Redis 应用:积分排行榜 - Java 技术驿站-Java 技术驿站...-程序员宅基地

文章浏览阅读306次。积分排行榜是 Redis 的经典应用。倘若数据都存在数据库中,每次访问网页都需要对所有的数据做排序,对于日访问量大的网站来说,不仅服务器吃不消,用户体验也不佳。在 Redis 中提供了 sorted set 数据结构——有序集合,其底层实现是跳表,因此插入和删除的效率都很高,适用于需实时排序的场景,游戏中的积分排行榜就是一个例子。ZSET 命令简介针对有序集合,Redis 准备了一系列的命令,实现..._java redis 帖子访问次数

RV1126笔记_rv1126k pdf-程序员宅基地

文章浏览阅读7.5k次,点赞16次,收藏99次。RV1126(更新完导出pdf保存)文章目录RV1126(更新完导出pdf保存)固件烧录修改调试串口波特率DTSdts的使用以及格式快速定位板子编译的dts解析dts文件驱动和设备树交互过程Pinctrlof_device_id 和 xxx_device_id建立自己的开发板dts查找soc自带的dts外设驱动配置DTS的方式时钟配置驱动实现步骤以太网(RMII)WIFI/BLEWIFII2Ces7243调试查看时钟开启情况PWMMIPI DSI屏配置方式一**:** 使用短字符串匹配写死的**timin_rv1126k pdf

随便推点

Python爬虫第五课:BeautifulSoup库的使用-程序员宅基地

文章浏览阅读225次。Python爬虫第五课:BeautifulSoup库的使用上一篇文章的正则,其实对很多人来说用起来是不方便的,加上需要记很多规则,所以用起来不是特别熟练,而这节我们提到的beautifulsoup就是一个非常强大的工具,爬虫利器。beautifulSoup “美味的汤,绿色的浓汤”一个灵活又方便的网页解析库,处理高效,支持多种解析器。利用它就不用编写正则表达式也能方便的实现网页信息的抓取快速使用通过下面的一个例子,对bs4有个简单的了解,以及看一下它的强大之处:复制代码from bs4 im

python中的深拷贝和浅拷贝_python哪个使用了软拷贝-程序员宅基地

文章浏览阅读913次。python中的深拷贝和浅拷贝浅拷贝意即只拷贝引用,仍然指向同一个内存地址,修改其中任何一个都会使所有的引用改变注意: 和java不同的地方在于python中的'=='比较的是内容,is 比较的内存地址,而java中 '==' 比较的是内存地址,equls则比较内容a = [1,2,3]b = aprint(a == b) # True..._python哪个使用了软拷贝

Nginx安装_埋坑之路(一)_archive: /opt/nginx/html/rose_patch.zip-程序员宅基地

文章浏览阅读854次。1、GCC——GNU编译器集合(GCC可以使用默认包管理器的仓库(repositories)来安装,包管理器的选择依赖于你使用的Linux发布版本,包管理器有不同的实现:yum是基于RedHat的发布版本;第一个安装包提供编译版本的库,而第二个提供开发阶段的头文件和编译项目的源代码,这正是我们需要的理由。(在Nginx中,如果服务器提供安全网页时则会用到OpenSSL库,我们需要安装库文件和它的开发安装包(openssl和openssl-devel)。RedHat中安装PCRE:(centos也可以使用)_archive: /opt/nginx/html/rose_patch.zip

Java InputStream.read()读取数据流字节,存储到缓冲区数组_java inputstream read-程序员宅基地

文章浏览阅读6.8k次。定义public abstract int read()public int read(byte[] b)public int read(byte[] b,int off,int len)参数:b:存储读入数据的缓冲区;off:数组 b 中将写入数据的初始偏移量;len:要读取的最大字节数返回:读入缓冲区的总字节数;如果因为已经到达流末尾而不再有数据可用,则返回 -1。异常抛出:IOException: 如果不是因为流位于文件末尾而无法读取第一个字节;如果输入.._java inputstream read

文件格式转换——DMG文件格式转换成ISO文件_dmg2iso-程序员宅基地

文章浏览阅读1.6w次。基本概念DMG是MAC OS上的压缩镜像文件,相当于在Windows上常见的ISO文件。DMG在苹果机上可以直接运行加载,在Windows PC上可以通过命令行软件dmg2iso.exe转换成ISO文件。下载下载地址:https://www.softpedia.com/get/System/Hard-Disk-Utils/dmg2iso.shtml使用命令运行格式:..._dmg2iso

二、模型、方式和观点——(一)_产品设计——推理设计案例-程序员宅基地

文章浏览阅读819次。(一)一、推理设计推理设计模型是对设计师在设计中的推理过程的普遍概述。该模型主要应用于有形产品设计。它能在不同层面帮助设计师反思在设计过程中所做的推理。1. 推理设计模型的目的是什么设计一款产品的核心是一个推理过程,即从产品的价值出发,随需求、功能和属性,直至最终产品形态和使用条件的推理过程。产品的功能取决于其:形态、使用方式及使用情境;这意味着——如果设计师对产品的几何形态与物理、化学(材料)特征有所了解,那么原则上可预测该产品的各种属性。如果设计师能进一步了解产品的使用方式及使用环境,_产品设计——推理设计案例