<!-- <transition-group> <table>列表筛选过渡效果案例 -->
<template>
<div>
<p>
<input v-model="query" type="text"/>
</p>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>age</th>
</tr>
</thead>
<transition-group
name="fade"
:css="false"
tag="tbody"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<tr v-for="(item,index) in computedItems" :key="item.txt" :data-index="index">
<td>{{item.txt}}</td>
<td>{{item.age}}</td>
</tr>
</transition-group>
</table>
</div>
</template>
<script>
export default {
name: "SayHello",
data() {
return {
query: '',
items: [
{txt: 'apple', age: 1},
{txt: 'apple apple', age: 1},
{txt: 'banana', age: 2},
{txt: 'orange', age: 20},
{txt: 'a big apple', age: 1},
{txt: 'grape', age: 3},
{txt: 'watermelon', age: 6},
{txt: 'strawberry', age: 10},
{txt: 'tomatoes', age: 7},
]
}
},
computed: {
computedItems() {
let self = this;
return this.items.filter((item, index) => {
return item.txt.toLowerCase().indexOf(self.query.toLowerCase()) !== -1;
})
}
},
methods: {
beforeEnter(el){
el.style.opacity = 0;
el.style.transform = "translateY('36px')";
},
enter(el ,done) {
var delay = el.dataset.index * 150;
setTimeout(function () {
Velocity(el, {opacity: 1, transformY: 0}, {complete: done})
}, delay);
},
beforeLeave(el){
el.style.opacity = 1;
el.style.transform = "translateY('0px')";
},
leave(el, done){
var delay = el.dataset.index * 150;
setTimeout(function () {
Velocity(el, {opacity: 0, transformY: -36}, {complete: done})
}, delay);
}
}
}
</script>
<style scoped lang="less">
.table {
border: 1px solid #ddd;
td {
border: 1px solid #ddd;
padding: 8px;
}
}
</style>
// 在main.js中全局引入velocity.min.js
// Velocity 和 jQuery.animate 的工作方式类似,也是用来实现 JavaScript 动画的一个很棒的选择
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js
/*
* Velocity中文文档
* http://shouce.jb51.net/velocity/index.html
* */
import '@/assets/js/velocity.min.js'