vue使用animate.css进行路由跳转

    作为一名前端开发，做页面没有动画效果实在不能忍受！无论是简单的淡入淡出，还是抖动等。下面就讲讲一个简单的动画库animate.css。因为工作中经常用到vue2，所以下面就以vue做出发点。

    一、关于vue2-animate依赖包

    vue2-animate是一个可在vue.js中直接加载并使用的依赖包。安装方式在githut中，我就不多言了。下面要讲的直接引入css的方式使用该动画库。

    二、直接引入animate.css

三、跳转页面动画效果

<!-- 使用animate跳转页面的动画效果： -->
    <!-- 方式一： -->
    <transition mode="out-in" enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">
        <router-view class="animated"></router-view>
    </transition>
    <!-- 方式二： -->
    <transition mode="out-in" enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft">
      <router-view></router-view>
    </transition>

其中mode="out-in"是解决切换时页面顶部会出现一段空白。这是vue的过渡模式，意思是：当前元素先进行过渡，完成之后新元素过渡进入。

动画效果如下：

四、使用router-link跳转页面

<ul>
      <router-link 
        :to="li.url"
        v-for="(li, index) in lis"
        v-text="li.name"
        tag="li"    <!-- tag表示可以将router-link的默认标签（a标签）转换成其他标签 -->
        :class="{li_active: cur === index}"
      ></router-link>
    </ul>