Vue.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>
<p>这段代码实现了一个搜索框功能，搜索结果以淡入淡出的动画效果展示。当用户在搜索框中输入内容时，页面会根据输入的内容动态筛选出符合条件的数据并以淡入淡出的动画效果展现出来。具体动画效果为，当新的数据被筛选出来时，它们会以淡入的动画效果逐个出现在页面上；当数据被删除时，它们会以淡出的动画效果逐个消失。同时，每个数据项的高度也会根据动画效果发生变化。</p>