在Vue中使用动画

About

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

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

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

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

1. 思路

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

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

Tab.gif

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

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

// html

    
     /*这里涉及到不同的切入方式，需要计算属性*/
      

        

          {{item.name}}
      
    


// 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

      

        

          {{item.cont}}
        
      
    

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