Vue-route页面切换过渡动画
重点: 1、判断路由前进还是后退
2、切换时动画如何实现
1、需要给各个页面定义层级,切换路由时判断进入哪个层级页面,如果进入层级高页面做前进动画,否则做后退动画
在路由定义中添加meta自定义参数
2、编写进出动画效果样式
此处注意:给<transition>外层div增加样式class="Router",并给div下所有元素增加样式,如下.Router>*
.Router{
position: relative;
}
.Router>*{
position: absolute;
width: 100%;
text-align: center;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 500ms;
}
.slide-right-enter {
opacity: 0;
transform: translateX(-100%);
}
.slide-right-leave-active {
opacity: 0;
transform: translateX(100%);
}
.slide-left-enter {
opacity: 0;
transform: translateX(100%);
}
.slide-left-leave-active {
opacity: 0;
transform: translateX(-100%);
}
3、为组件指定可能执行的动画效果
<transition :name="transitionName">
<router-view></router-view>
</transition>
4、监听路由变化判断具体执行哪个动画
可以通过路由的参数获取到之前设置的索引,从而判断动画效果是向左还是向右
完结 撒花~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
注:如有与其它文章相同内容,请不要惊慌,只是借见下这个知识,这只是个人学习
Vue-route页面切换过渡动画的更多相关文章
- Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
- vue项目页面切换到默认显示顶部
页面切换到默认显示顶部 方法一 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页 ...
- iOS开发之——从零开始完成页面切换形变动画
前言 某天我接到了UI发给我的两张图: 需求图.png 看到图的时候我一脸懵逼,显然我需要做一个页面切换的指示动画.老实说,从大三暑假开始做iOS开发也一年有余了,但是遇到复杂动画总是唯恐避之不及,只 ...
- Android开发之ViewPager实现多页面切换及动画效果(仿Android的Launcher效果)
Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下: 1.Vi ...
- vue页面切换过渡
<!--<transition name="slide-left">--> <router-view></router-view>& ...
- 基于Vue的页面切换左右滑动效果
HTML文本页面: <template> <div id="app> <transition :name="direction" mode= ...
- 实现页面切换(动画效果实现,不用ViewPager)
源代码地址 http://download.csdn.net/detail/u013210620/8791687 先看主页面布局activity_main <?xml version=" ...
- Vue完成页面切换中加载数据
created() { // 拿到路由传递来的car主键 let pk = this.$route.query.pk || this.$route.params.pk; // 主键不存在,就直接结束方 ...
- QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...
随机推荐
- AtCoder Regular Contest 085 C HSI【概率论】
AtCoder Regular Contest 085 C HSI 没学概率论还不怎么看得懂,虽然感觉不难,其实明明可以猜出来的..... 参考博客:https://www.cnblogs.com/g ...
- 洛谷4137 mex题解 主席树
题目链接 虽然可以用离线算法水过去,但如果强制在线不就gg了. 所以要用在线算法. 首先,所有大于n的数其实可以忽略,因为mex的值不可能大于n 我们来设想一下,假设已经求出了从0到n中所有数在原序列 ...
- ubuntu18.10 安装pycurl
sudo apt-get install libcurl3 sudo apt-get install libcurl4-openssl-devsudo apt-get install python3 ...
- Java实现接口用来弥补Java单继承的缺陷
package com.test3;/** * @author qingfeng * 功能:继承类 VS 实现接口 :两者之间的关系(实现接口用来弥补Java单继承的缺陷) */public clas ...
- Redis源码解析:05跳跃表
一:基本概念 跳跃表是一种随机化的数据结构,在查找.插入和删除这些字典操作上,其效率可比拟于平衡二叉树(如红黑树),大多数操作只需要O(log n)平均时间,但它的代码以及原理更简单.跳跃表的定义如下 ...
- 异常处理之多重catch
package com.sxt.exception.test1; import java.util.InputMismatchException; import java.util.Scanner; ...
- 洛谷P2330 [SCOI2005]繁忙的都市
#include<bits/stdc++.h> using namespace std; ; ; int n,k,Max,tot; struct node{ int cnt,fa; }f[ ...
- 利用scrapy爬取文件后并基于管道化的持久化存储
我们在pycharm上爬取 首先我们可以在本文件打开命令框或在Terminal下创建 scrapy startproject xiaohuaPro ------------创建文件 scrapy ...
- hdu 1595 find the longest of the shortest(迪杰斯特拉,减去一条边,求最大最短路)
find the longest of the shortest Time Limit: 1000/5000 MS (Java/Others) Memory Limit: 32768/32768 ...
- phpstorm 中git 的使用
phpstorm 是一款不可多得的IDE 环境,它既是一款强大的编辑器,还是一款调试器,同时还是一款git 可视化管理工具哟,phpers 值得拥有.今天介绍的是他不为人知的强大功能 —— git. ...