Vue.js - Transition过渡动画的使用6（配合vue-router、vue-navigation使用）
一、给 vue-router 设置过渡动画
如果项目组使用了前端路由插件 <vue-router> 的话，我们同样可以对其设置 transition 过渡。这样页面切换时会有个转场动画，就不会显得那么生硬。
1，基本用法
（1）效果图
页面组件跳转时会有淡入淡出的动画效果（老页面逐渐消失后，新页面逐渐显示出来）。
（2）样例代码
- 这里我还配合 <keep-alive> 使用。因为 keep-alive 可以缓存数据。这样前进、后退后，之前路由组件的数据仍然保留，下次再访问时就不需要重新渲染。
- 动画方面我没有使用自定义的过渡样式，而是使用 animinate.css 提供的效果。关于 animinate.css 具体介绍可以查看我之前写的文章（点击查看）。
<template>
<div id="app">
<transition mode="out-in"
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut">
<keep-alive>
<router-view/>
</keep-alive>
</transition>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
2，不同情况使用不同的跳转动画
（1）效果图
（2）样例代码如下，直接使用 transition 组件将 <navigation> 包裹起来即可
上面样例中可以发现，不管是从哪个页面跳转到哪个页面，过渡效果都是淡入淡出。下面我们对其作个功能改进：
- 当进入下一层级时（下一步），当前页面向左滑出，同时新页面从右侧滑入。
- 但返回上一层级时（上一步），当前页面向右滑出，同时新页面从左侧滑入。
- 如果是同层级切换，则使用淡入淡出效果。
（2）要实现上面的效果，首先我们在路由文件（router\index.js）中，在每个路径的路由元信息 meta 中设置个 depth 属性值，用来表示其路由的深度（层级）
（3）然后监听 $route，根据 to、from 元信息中的 depth 值的大小，设置不同的跳转动画。
import Vue from 'vue'
import Router from 'vue-router'
import step1 from '@/components/step1'
import step2 from '@/components/step2'
import step3 from '@/components/step3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'step1',
component: step1,
meta: {
depth: 1
}
},
{
path: '/step2',
name: 'step2',
component: step2,
meta: {
depth: 2
}
},
{
path: '/step3',
name: 'step3',
component: step3,
meta: {
depth: 3
}
}
]
})
（3）然后监听 $route，根据 to、from 元信息中的 depth 值的大小，设置不同的跳转动画。
<template>
<div id="app">
<transition
:enter-active-class="enterTransition"
:leave-active-class="leaveTransition">
<keep-alive>
<router-view/>
</keep-alive>
</transition>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
enterTransition: 'animated fadeIn',
leaveTransition: 'animated fadeOut',
}
},
watch: {
'$route' (to, from) {
let toDepth = to.meta.depth;
let fromDepth = from.meta.depth;
if (fromDepth > toDepth) {
this.enterTransition = 'animated fadeInLeft';
this.leaveTransition = 'animated fadeOutRight';
} else if (fromDepth < toDepth) {
this.enterTransition = 'animated fadeInRight';
this.leaveTransition = 'animated fadeOutLeft';
} else {
this.enterTransition = 'animated fadeIn';
this.leaveTransition = 'animated fadeOut';
}
}
}
}
</script>
二、给 vue-navigation 设置过渡动画
1，基本用法
（1）效果图
页面组件跳转时会有淡入淡出的动画效果（老页面逐渐消失后，新页面逐渐显示出来）。
<template>
<div id="app">
<transition mode="out-in"
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut">
<navigation>
<router-view/>
</navigation>
</transition>
</div>
</template>
2，不同情况使用不同的跳转动画
（1）效果图
- 当进入下一层级时（下一步），当前页面向左滑出，同时新页面从右侧滑入。
- 但返回上一层级时（上一步），当前页面向右滑出，同时新页面从左侧滑入。
- 如果是同层级切换，则使用淡入淡出效果。
（2）样例代码
- 当在使用 vue-router 进行路由导航时，如果想实现前进后退使用不同过渡动画，我们需要在路由文件中进行相应的配置，这样略显麻烦。
- 而如果我们项目中使用的是 vue-navigation 这个导航库话那就十分简单了，因为它可以识别除路由的前进后退，无须对 router 进行多余的设置。
<template>
<div id="app">
<transition
:enter-active-class="enterTransition"
:leave-active-class="leaveTransition">
<navigation>
<router-view/>
</navigation>
</transition>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
enterTransition: 'animated fadeIn',
leaveTransition: 'animated fadeOut',
}
},
created() {
this.$navigation.on('forward', (to, from) => {
this.enterTransition = 'animated fadeInRight';
this.leaveTransition = 'animated fadeOutLeft';
})
this.$navigation.on('back', (to, from) => {
this.enterTransition = 'animated fadeInLeft';
this.leaveTransition = 'animated fadeOutRight';
})
this.$navigation.on('replace', (to, from) => {
this.enterTransition = 'animated fadeIn';
this.leaveTransition = 'animated fadeOut';
})
}
}
</script>
