Vue页面跳转动画效果的实现方法

点击  等同于调用 router.push(...)

(...)该方法的参数可以是一个字符串，或者一个描述地址的对象：

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

组件路由跳转实例：

1.

<router-link :to="{name:'PointList', params: { userId: 123 }}">
 <i class="icon"><img src="../assets/point.png" alt=""></i>
 <span>点单</span>
</router-link>

2.

<footer class="version" @click="goPage('Author')">v 1.0</footer>
//Js：
methods: {
 goPage(url, param) {
 this.$router.push({ name: url });
 }
}

三、vue路由对象$route(只读)

在使用了vue-router的应用中，路由对象会被注入每个组件中，赋值为this.$route,并且当路由切换时，路由对象会被更新。所以route相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等，即包含了当前URL解析得到的信息，还有URL匹配到的路由记录。

路由对象暴露了以下属性(常见)：

1、$route.path

字符串(string)。等于当前路由对象的路径，会被解析为绝对路径，
如:http://example.com/#/login?name=aa，this.$route.path
，输出“/login”，即对应上面1中路由匹配时routes配置中的“path”；

2、$route.name

字符串(string)。有时候，通过一个名称来标识一个路由显得更加方便，特别是在链接一个路由，或者是执行一些跳转的时候。同样，这里的name也对应了routes配置中给某个路由设置名称的name值：

要链接到一个命名路由，可以给router-link的to属性传一个对象：

<router-link :to="{name:'Order', params: { userId: 123 }}">
</router-link>

用在调用router.push()中也是一回事：

this.$router.push({ name: 'Order', params: { userId: 123 }})

3、$route.params

对象(object)。路由跳转携带参数：

this.$router.push({ name: 'Order', params: { userId: 123 }})
console.log(this.$route.params.userId); //123

4、$route.query

对象(object)。可访问携带的查询参数：

this.$router.push({name: 'login', query:{name: 'userName'}});
this.$route.query.name; //you
//此时路由为:http://example.com/#/login?name=userName。

5、$route.redirectedFrom

字符串(string)。重定向来源：

如：{ path: '*',redirect: {name: 'hello'}}
 此时访问不存在的路由http://example.com/#/a会重定向到hello，
在hello访问this.$route.redirectedFrom; 输出“/a”。

6、$route.matched

数组(array)。当前路由下路由声明的所有信息，从父路由(如果有)到当前路由为止。

7、$route.hash

字符串(string)。当前路径的hash值。

四、vue监听$route的方式

watch：{‘$route' (to, from) {}}

route 的变化。watch中监听的对象默认回调函数中的参数值就是newVal,oldVal。作为 $route 属性来说当然也就是 to 和 from 的概念了。

Vue用router.push(传参)跳转页面，参数改变，在跳转后的路由观察路由变化，进行页面刷新，可对“from->to”的过程设置动画效果。

该功能的难点就在于怎样获取“上一页”和“下一页”,即怎样分辨是“前进”还是“后退”？

例：

// watch $route 决定使用哪种过渡
watch:{
 '$route' (to, from) {
 //此时假设从index页面跳转到pointList页面
 console.log(to); // "/pointList"
 console.log(from); // “/index”
 const routeDeep = ['/', '/index','/pointList', '/settLement'];
 const toDepth = routeDeep.indexOf(to.path)
 const fromDepth = routeDeep.indexOf(from.path)
 this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
 }
 },

to、from是最基本的路由对象，分别表示从(from)某个页面跳转到(to)另一个页面,to.path（表示要跳转到的路由地址），from.path同理。

定义routeDeep数组，将路由目录按层级依次排序(暂不考虑嵌套路由的情况)，复杂单页应用里，同一层级（如同一页面上的多个导航按钮）顺序随意，然后依次排列每个导航的下一页、下下页…即保证每个“上一页”在“下一页”前面。

总结下来就是：按照routeDeep数组里定义的路由目录的顺序，“toDepth > fromDepth”表示“上一页”跳转到“下一页”，同理可由此判断是“前进”还是“后退”。

五、Vue2.0中transition组件的使用

<transition :name="transitionName">
 <router-view class="view app-view"></router-view>
</transition>

过渡CSS类名

transition中的name属性用于 替换 vue钩子函数中的类名transitionName-

this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'

在“watch $route”中，判断页面跳转的“前进”和“后退”时，决定用不同的过渡效果（fold-left还是fold-right）。

六、animation、transform动画效果实现

在上一个主题中，判断页面跳转路径之后，为两种跳转的transition设置不同的类名“fold-left”、“fold-right”。
然后在CSS中，为两种类名设置不同的动画效果(这里以“左滑动”和“右滑动”为例)：

.fold-left-enter-active {
 animation-name: fold-left-in;
 animation-duration: .3s;
 }
 .fold-left-leave-active {
 animation-name: fold-left-out;
 animation-duration: .3s;
 }
.fold-right-enter-active {
 animation-name: fold-right-in;
 animation-duration: .3s;
 }
 .fold-right-leave-active {
 animation-name: fold-right-out;
 animation-duration: .3s;
 }

animation 属性是一个简写属性，用于设置六个动画属性：

@keyframes fold-left-in {
 0% {
 transform: translate3d(100%, 0, 0);
 }
 100% {
 transform: translate3d(0, 0, 0);
 }
 }
 @keyframes fold-left-out {
 0% {
 transform: translate3d(0, 0, 0);
 }
 100% {
 transform: translate3d(-100%, 0, 0);
 }
 }

根据CSS3 @keyframes规则，创建动画。创建动画的原理即将一套CSS样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套CSS样式。可以“百分比”来规定改变发生的时间，或者通过关键词“from”和“to”，等价于“0%”(动画的开始时间)和“100%”(动画的结束时间)。一般为了获得最佳的浏览器支持，应该始终定义0%和100%选择器。

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。translate3d(x,y,z)定义3D转换，如transform：translate3d(100%, 0, 0)只改变了x的值，即代表横向左滑动，同理可相应推出其他情况。

总结