Vue中 transition 过渡动画的使用 (结合 vue-navigation）

本文讨论的 animinate.css 为 v 4.x版本，3.x版本需调整 class 类名

​​animate.css 官网​​

前言 vue中引入使用 animinate.css

安装：Install with npm:

npm install animate.css --save

with yarn:

yarn add animate.css

引入main.js

import animated from "animate.css";
Vue.use(animated);

组件中使用每个动画名前面都要有 animate__animated

<h1 class="animate__animated animate__bounce">An animated element</h1>

1. vue-router 设置过渡动画

1.1 基本语法

1. 这里配合 < keep-alive > 使用，因为 keep-alive 可以缓存数据。这样前进、后退后，之前路由组件的数据仍然保留，下次再访问时就不需要重新渲染。
2. 动画方面没有使用自定义的过渡样式，而是使用 animinate.css 提供的效果。

<template>
<div id="app">
<transition  
mode="out-in"
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut">
<keep-alive>
<router-view/>
</keep-alive>
</transition>
</div>
</template>

<script>
export default {
data(){
return{
    }
  },
}
</script>

效果图

1.2 不同情况使用不同的跳转动画

上面样例中可以发现，不管是从哪个页面跳转到哪个页面，过渡效果都是淡入淡出。下面我们对其作个功能改进：

1. 当进入下一层级时（下一幕），当前页面向左滑出，同时新页面从右侧滑入
2. 但返回上一层级时（上一幕），当前页面向右滑出，同时新页面从左侧滑入
3. 如果是同层级切换，则使用淡入淡出效果

// 在路由文件（router\index.js）中，在每个路径的路由元信息 meta 中设置个 depth 属性值，用来表示其路由的深度（层级）
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'nav.Home',
    component: () => import('../views/Home.vue'),
    meta:{depth:1}
  },
  {
    path: '/test',
    name: 'nav.Test',
    component: () => import('../views/Test.vue'),
    meta:{depth:2}
  }
]

const router = new VueRouter({
  routes
})

export default router

// 监听 $route，根据 to、from 元信息中的 depth 值的大小，设置不同的跳转动画
<template>
<div id="app">
<transition  
:enter-active-class="enterTransition" 
:leave-active-class="leaveTransition">
<keep-alive>
<router-view class="routeView"/>
</keep-alive>
</transition>
</div>
</template>

<script>
export default {
data(){
return{
enterTransition: 'animate__animated animate__fadeIn',
leaveTransition: 'animate__animated animate__fadeOut',
    }
  },
watch:{
'$route' (to, from) {
let toDepth = to.meta.depth;
let fromDepth = from.meta.depth;
if (fromDepth > toDepth) {
this.enterTransition = 'animate__animated animate__fadeInLeft';
this.leaveTransition = 'animate__animated animate__fadeOutRight';
      } else if (fromDepth < toDepth) {
this.enterTransition = 'animate__animated animate__fadeInRight';
this.leaveTransition = 'animate__animated animate__fadeOutLeft';
      } else {
this.enterTransition = 'animate__animated animate__fadeIn';
this.leaveTransition = 'animate__animated animate__fadeOut';
      }
    }
  }
}
</script>

<style>
/* 去除切换间的留白 */
.routeView{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
}
</style>

效果图

2. vue-navigation 设置过渡动画

2.1 基本用法

<template>
<div id="app">
<transition mode="out-in"
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut">
<navigation>
<router-view/>
</navigation>
</transition>
</div>
</template>

2.2 不同情况使用不同的跳转动画

1. 当在使用 vue-router 进行路由导航时，如果想实现前进后退使用不同过渡动画，需要在路由文件中进行相应的配置，这样略显麻烦;
2. 而如果项目中使用的是 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: 'animate__animated animate__fadeIn',
leaveTransition: 'animate__animated animate__fadeOut',
    }
  },
created() {
this.$navigation.on('forward', (to, from) => {
this.enterTransition = 'animate__animated animate__fadeInRight';
this.leaveTransition = 'animate__animated animate__fadeOutLeft';
    })
this.$navigation.on('back', (to, from) => {
this.enterTransition = 'animate__animated animate__fadeInLeft';
this.leaveTransition = 'animate__animated animate__fadeOutRight';
    })
this.$navigation.on('replace', (to, from) => {
this.enterTransition = 'aanimate__animated animate__fadeIn';
this.leaveTransition = 'animate__animated animate__fadeOut';
    })
  }
}
</script>