**过渡效果**
提供了 transition 的封装组件，添加过渡动画；通过添加删除css类名来实现。
**过渡的css类名：默认的前缀是 "v-"开头**
- v-enter：定义进入过度的开始状态；
- v-enter-active：定义进入活动状态；
- v-enter-to：定义进入的结束状态；
- v-leave：定义离开过渡的开始状态；
- v-leave-active：定义离开活动状态；
- v-leave-to：定义离开的结束状态；
- 使用name属性改变类名前缀
<template>
<div id="app">
<div class="nav-box">
<ul class="f-cb">
<li><router-link to="/" exact tag="div" event="mouseover">home</router-link></li>
<li><router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link></li>
<router-link to="/about" tag="li" event="mouseover">
<i></i>
<span>about</span>
</router-link>
<li><router-link to="/user" event="mouseover">user</router-link></li>
</ul>
</div>
<div class="content f-cb">
<transition><!--把想要过渡的组件放在transition标签内-->
<router-view class="center"></router-view>
</transition>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data(){ return {} }
}
</script>
<style>
.v-enter{opacity: 0;}
.v-enter-to{opacity: 1;}
.v-enter-active{transition: 1s;} /*定义过渡时间*/
.v-leave{opacity: 1;}
.v-leave-to{opacity: 0;}
.v-leave-active{transition: 2s;}
</style>
上方代码渲染的结果出现问题：消失的组件过程需要2秒，出来的组件显示过程需要1s。出来的组件已经显示，但是消失的组件还在消失的过程中。由于文档流的原因，出来的组件就会显示在下面，出现共存现象。
解决方案：.center 相对于 .content 绝对定位。
<div class="content f-cb" style="position:relative;">
<transition><!--把想要过渡的组件放在transition标签内-->
<router-view class="center" style="position: absolute;top:0;left:0;"></router-view>
</transition>
</div>
这时候出来和消失的组件动画都是同时进行的。
现在要求离开的组件完全消失好，出来的组件在显示出来。添加过渡模式。
<div class="content f-cb" style="position:relative;">
<transition mode="out-in"><!--把想要过渡的组件放在transition标签内-->
<router-view class="center" style="position: absolute;top:0;left:0;"></router-view>
</transition>
</div>
**过渡模式**
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
**动态组件的过渡**
<tranistion name="fade" mode="out-in">
<div :is="currentView"><>
</transition>
**多元素过渡**
<tranistion name="fade" mode="out-in">
<p v-if="show">i am show</p>
<div v-else="show">not show</div>
</transition>
`注：当v-if与v-else的标签名是相同的话，是不会有过渡效果的，必须要指定key值。`
