Vue 搜索列表动画效果实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索列表</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/velocity-animate"></script>
</head>
<body>
<div id="app">
<input placeholder="请输入要查找的内容" v-model="query">
<fade :query="query" :items="items">
<li v-for="(item, index) in filteredItems" :key="item.msg" :data-index="index">{{ item.msg }}</li>
</fade>
</div>
<pre><code> <template id="fade-template">
<transition-group name="item" tag="ul" @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false">
<slot></slot>
</transition-group>
</template>
<script>
Vue.component('fade', {
props: ['query', 'items'],
template: '#fade-template',
methods: {
beforeEnter(el) {
el.style.opacity = 0;
el.style.height = 0;
},
enter(el, done) {
const delay = el.dataset.index * 150;
setTimeout(() => {
Velocity.animate(el, { opacity: 1, height: '1.6em' }, { complete: done });
}, delay);
},
leave(el, done) {
const delay = el.dataset.index * 150;
setTimeout(() => {
Velocity.animate(el, { opacity: 0, height: 0 }, { complete: done });
}, delay);
}
},
computed: {
filteredItems() {
const query = this.query.toLowerCase();
return this.items.filter(item => item.msg.toLowerCase().indexOf(query) !== -1);
}
}
});
new Vue({
el: '#app',
data: {
query: '',
items: [
{ msg: '张三' },
{ msg: '李四' },
{ msg: '王五' },
{ msg: '徐凤年' },
{ msg: '李纯' },
]
}
});
</script>
</body>
</code></pre>
</html>
原文地址: https://www.cveoy.top/t/topic/nQuK 著作权归作者所有。请勿转载和采集!