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钩子函数来实现动画效果。
