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

本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

本文讨论的 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>