Vue.js 实现简单的搜索功能并使用 Velocity.js 添加动画效果

<div id="app">
  <input placeholder="请输入要查找的内容" v-model="query">
  <transition-group name="item" tag="ul" @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <li v-for="(item, index) in computedList" :key="item.msg" :data-index="index">
      {{item.msg}}
    </li>
  </transition-group>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        query: '',
        items: [
          {msg: '张三'},
          {msg: '李四'},
          {msg: '张芳芳'},
          {msg: '王琳琳'},
          {msg: '丰源'}
        ]
      }
    },
    computed: {
      computedList() {
        var vm = this.query.toLowerCase()
        return this.items.filter(function(item) {
          return item.msg.toLowerCase().indexOf(vm) !== -1
        })
      }
    },
    methods: {
      beforeEnter(el) {
        el.style.opacity = 0
        el.style.height = 0
      },
      enter(el, done) {
        var delay = el.dataset.index * 150
        Velocity(el, {opacity: 1, height: '1.6em'}, {duration: 500, delay: delay, complete: done})
      },
      leave(el, done) {
        var delay = el.dataset.index * 150
        Velocity(el, {opacity: 0, height: 0}, {duration: 500, delay: delay, complete: done})
      }
    }
  })
</script>