vue-过渡动画

本篇资料参考于官方文档：

http://cn.vuejs.org/guide/transitions.html

概述：

Vue 在跳转页面时，提供多种不同方式的动画过渡效果。

●in-out：新元素先进行过渡，完成之后当前元素过渡离开。

●out-in：当前元素先进行过渡，完成之后新元素过渡进入。

 <transition name="fade" mode="out-in">
   <!-- ... the buttons ... -->
 </transition>

过渡类名：在进入/离开的过渡中，会有 6 个 class 切换。

1，v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

2，v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

3，v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。

4，v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

5，v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

6，v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

示例：App.vue

<template>
  <div id="app">
    <transition name='slide-fade' mode="out-in"><!-- name='名字随便取，不过要符合命名规范，哈哈' -->
       <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
.slide-fade-enter-active,.slide-fade-leave-active{transition: opacity .3s ease;}
.slide-fade-enter,.slide-fade-leave-active{opacity: 0;}
</style>

然后就可以在全局使用了，只要是通过路由跳转的页面，都会引用到这个过渡效果。

效果展示：