About

之前写过一篇博客：在Vue中使用css动画，里面没讲如何使用JavaScript钩子函数来控制动画效果，本来今天打算写这个的，但是转念一想，先写个实战项目巩固巩固可能更好，于是乎花了很长时间来写这篇博客。

希望读者朋友们喜欢，如果有哪里写得不对，敬请指正，谢谢。

一、使用animate.css实现Tab切换的过渡

记得以前做小程序的时候有个UI问我能不能切换在Tab的时候做一个动画效果，用户体验更好，当时我一脸懵逼，于是在学完Vue动画后趁热打铁把这个功能实现了。

1. 思路

有两种办法：（1）通过swiper实现；（2）通过动画实现。
怎么说通过swiper都更简单，但是因为我这个页面之前的Tab切换使用路由切换完成的，所以这里使用了animate动画，（但其实我觉得用swiper才是最好的解决方案，哈哈）

2. 效果图（手机上比这流畅）

Tab.gif

3. 代码如下（请看注释）

这里只展示了动画部分，其他的业务代码就没放这了，有兴趣看完整项目代码的小伙伴请移步：传送门

// html
<div class="hot-wrap">
    <banner title="热门城市"></banner>
    <transition
      appear  /*因为我们这个是入场动画，所以需要传入appear='true' */
      :appear-active-class="direction"> /*这里涉及到不同的切入方式，需要计算属性*/
      <ul class="city">
        <li @click="changeLocate(item.name)"
          class="item border"
          v-for="(item, index) of cityList"
          :key="index" ref="locate"
        >
          {{item.name}}</li>
      </ul>
    </transition>
</div>

// js
direction () {
      if (this.abroad) {  // 这里用来判断是国内还是境外地区，返回不同的animate类
        return 'animated fadeInRight'
      } else {
        return 'animated fadeInLeft'
      }
    }

除此之外，如果router-view使用了keep-alive这里也不能提供动画效果。

二、使用Vue原生动画

这里只是一个小练习，可能这个效果用在这里并不太合适。

1. 效果图

动画效果.gif

2. 思路

因为动画必须涉及DOM节点的变化，所以这里实现起来对我来说颇费了一些周折，因为这里本来本来是一个ul循环列表，实际上当重新渲染的时候ul这个节点没有变化，变换的是其子节点li，但是我们又不能给li包裹transition，所以transition只能应用于ul，于是我设置了个定时器来控制ul节点的显示与否。

3. 代码如下

// html
<transition name="fade">
      <ul class="sear-right" v-if="ifShow">
        <li class="right-item"
          @click="handelClick(item.cont)"
          v-for="item of optionsList.sightList"
          :key="item.id"
          >
          {{item.cont}}
        </li>
      </ul>
    </transition>

// js
mounted () {
    this.bus.$on('changelist', () => {
      if (this.signal === 'changelist') {  // 当监听到changelist并且确定是这个组件的时候
        this.ifShow = false  // 改变ifShow的状态
        if (this.timer) { clearTimeout(this.timer) }
        this.timer = setTimeout(() => {  // 设置定时器，时长为动画效果的时长
          this.ifShow = true
        }, 500)
      }
    })
  }

// css
.fade-enter, .fade-leave-to {
    opacity: 0;
  }
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;  // 动画效果持续时长
  }

结束语

下篇博客一定要写如何通过JavaScript钩子函数来实现动画效果。