在vue中使用velocity动画库实现列表交错过渡

这个消息通知组件，我点击清空通知后，想要清除里面的信息，如果直接清空是下面这样的：

可以看出这样会显得非常生硬，再来看加上过渡之后的：

是不是感觉不一样了，这实际上是用velocity动画库实现的：

1. 首先npm安装Velocity

npm i velocity-animate

2. 在main中引入velocity-animate就可以了

import Velocity from 'velocity-animate'
Vue.prototype.Velocity = Velocity

3. 这是我根据vue官网中的例子修改的

<template>
  <div id="app">
    <button @click="show = !show">{{ btnText }}</button>
    <transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter"
      v-on:enter="enter" v-on:leave="leave">
      <li class="app-li" v-show="show" v-for="(item, index) in list" :key="item.id" :data-index="index">{{ item.msg }}
      </li>
    </transition-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      btnText: "退出过渡",
      list: [
        { id: '01', msg: 'Bruce Lee' },
        { id: '02', msg: 'Jackie Chan' },
        { id: '03', msg: 'Chuck Norris' },
        { id: '04', msg: 'Jet Li' },
        { id: '05', msg: 'Kung Fury' }
      ]
    }
  },
  methods: {
    //过渡初始参数
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    //进入过渡动画
    enter: function (el, done) {
      var delay = el.dataset.index * 150
      this.btnText = "退出过渡"
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 1, height: '30px' },//注意这里高度要跟你li高度一样
          { complete: done }
        )
      }, delay)
    },
    //离开过渡动画
    leave: function (el, done) {
      var delay = el.dataset.index * 150
      this.btnText = "进入过渡"
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 0, height: 0 },
          { complete: done }
        )
      }, delay)
    }
  }
}
</script>
<style>
.app-li {
  list-style: none;
  width: 200px;
  height: 30px;
  border: 1px solid #333;
}
</style>
``