（2）加入CSS，一共4个CSS类名，四个类名与transition的name属性有关，比如name=”fade”，相应的css如下：

/*页面切换动画*/
/*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/
.fade-enter-active {
    transition: opacity .5s;
/*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/
.fade-enter {
    opacity: 0;
/*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/
.fade-leave {
    opacity: 1;
/*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/
.fade-leave-active {
    opacity:0;
    transition: opacity .5s;
2、过渡模式mode
 
in-out：新元素先进入过渡，完成之后当前元素过渡离开，默认模式。
 out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入。
    <transition>
      <router-view class="center"></router-view>
    </transition>
当然要想要实现过渡效果需要配合过渡
                                    在开发过程中一般都用css动画，很少使用js动画，因为js动画非常消耗性能。vue提供的动画方式在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js过渡的类名v-enter：定义进入过渡的开始状态。v-ente...
经过前几篇的学习，小伙伴学会了如何实现对元素和组件之间过渡的动画效果，是不是感觉挺好玩的，哈哈，发现炫酷的东西都比较吸引人，可是只是这些就满足了吗？经常逛一些教程网站的小伙伴可能发现过在路由跳转之间会有一个过渡动画的效果，比如慢慢消失再慢慢出现的效果，也许还会有一个进度条、loading等等好多好玩的东西，但是
                                    vue router 过渡 威格 (VUEG)
just need to add Vue.use(vueg) ,vue-router will have a transition effect.
 只需添加Vue.use(vueg)，vue-router将具有过渡效果。 
View demo
查看演示 Download Source 
 用法 (Usage)
0、Installa...
                                    今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来.我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.每次切换时向左向右切换动画如何实现。如何判断切换路由时是前进还是后退。
                                    由于官方文档写的太过抽象，真的特别不好理解，所以我来总结一下如何去更简单地理解路由跳转时的动画。首先看一下官方对于这个概念的解释。在刚开始学习的时候，看到黄色框框里内容直接傻眼，从未见过这个指令。不知道这个地方到底是固定写法还是让我们写自己的组件？1.在这里准备两个文件来演示这个指令的作用。2.结构也很简单就是一个按钮组件里并没有自己的组件，而是使用了这个标签来显示出这个组件。3.也是可以正常传递的4.这样这个组件自身就相当于这个组件，你可能会好奇，这有什么用呢？5.如果我们像下面这样写，我再引入一个组件，
                                    <transition name="fade-transform" mode="out-in">
     <router-view></router-view>
</transition>
在公共样式中添加
// global transition css
/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
.fade-enter,
                                    这里涉及到两个知识点：Transition+routerView，下面先展示下vue官网相关使用说明：1.Vue 提供了Transition内置组件，可以帮助制作基于状态变化的过渡和动画；
2.是基本的动态组件，所以我们可以用组件给它添加一些过渡效果
//1. 安装  npm i vue-router
//2. 使用  a. 使用 vue.use(路由) 将路由添加成整个项目的全局功能  
import Vue from 'vue'
import VueRouter from 'vue-router'
//b.定义路由组件，也就是将需要当作页面的组件导入
import Home from './components/Home.vue'
import About from './components