Vue.js 列表过滤与动画效果实现 - Velocity.js 应用

<div id="app">
<input placeholder="请输入要查找的内容" v-model="query">
<fade:query="query":items="items">
  <li v-for="(item, index) in ComputedList"
  :key="item.msg" :data-index="index">{{ item.msg }}</li>
</fade>
</div>
<template id="temp">
  <transition-group name="item" tag="ul" @before-enter="beforeEnter"
  @enter="enter" @leave="leave" :css="false"></transition-group>
</template>
<script>
  
  Vue.component('fade',{
    props:['query','items'],
    template:'#temp',
    methods:{
      beforeEnter(el){
        el.style.opacity=0
        el.style.height=0
      },
      
      enter(el,done){
        var delay=el.dataset.index*150
        setTimeout(function(){
          Velocity.animate(el,{opacity:1,height:'1.6em'},
          {complete:done})
        },delay)
      },
      
      leave(el,done){
        var delay=el.dataset.index*150
        setTimeout(function(){
          Velocity.animate(el,{opacity:0,height:0},
          {complete:done})
        },delay)
      }
    }
  })
  
  
  var vm=new Vue({
    el:'#app',
    data:{
      query:'',
      items:[
      {msg:'张三'},
      {msg:'李四'},
      {msg:'王五'},
      {msg:'徐凤年'},
      {msg:'李纯'},
      ]                    
    },
    computed:{
      ComputedList(){
        var vm=this.query
        var nameList=this.items
        return nameList.filter(function(item){
          return item.msg.toLowerCase().indexOf(vm.toLowerCase())!==-1
        })
        
      }
    }
    
  })
</script>