Vue自定义动画和animate.css使用

看过很多篇讲transition的文章，，我再废话一遍~ 
还是接着上一篇的项目接着写

1、自定义动画
用<transition></transition>将你需要用动画展示的内容包裹起来，比如路由视图：

<transition name="fadein">
      <router-view></router-view>
</transition>

基于动画fadein，有4个关联的样式类：

fadein-enter//初始状态

fadein-enter-active//显示时的状态，即从初始状态变化而来的状态

fadein-leave-active//离开时的状态

fadein-leave//离开后的状态

比如一个透明变化的效果：

.fadein-enter-active,.fadein-leave-active{
    opacity: 1;
    transition:opacity .7s;
    -webkit-transition:opacity .7s;
  }
.fadein-enter,.fadein-leave {
    opacity: 0;
    transition:opacity .7s;
    -webkit-transition:opacity .7s;
  }

2、配合animate.css使用的动画  

下载animate.css并引入项目  https://daneden.github.io/animate.css/

@import './assets/animate.css';

<transition enter-active-class="animated fadeInLeft"
     leave-active-class="animated fadeOutRight">
      <router-view></router-view>
</transition>

.fadeInLeft,.fadeOutRight是animate.css里的一个样式类，，前面的.animated一定要加上，否则效果出不来