如下代码,本质上就是将transition-group作为根组件,内部使用slot插槽。
代码中使用到的Velocity是一个高性能的动画库
使用方式为Velocity(元素节点,css样式,配置项)
配置项详情可参考Velocity.js中文文档
Vue.component('demo-component', {
template: `
<transition-group
tag="ul"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<slot></slot>
</transition-group>
`,
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.height = 0
},
enter: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 1, height: '1.6em' },
{ complete: done }
)
}, delay)
},
leave: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 0, height: 0 },
{ complete: done }
)
}, delay)
}
}
})
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>可复用的过渡</title>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<style>
.list_item {
height: 1.6em;
}
</style>
<body>
<div id="demo">
<p>这是一个demo</p>
<input v-model="query">
<demo-component>
<li
class="list_item"
v-for="(item, index) in computedList"
:key="item.msg"
:data-index="index"
>{{ item.msg }}</li>
</demo-component>
</div>
</body>
<script>
Vue.component('demo-component', {
template: `
<transition-group
tag="ul"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<slot></slot>
</transition-group>
`,
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.height = 0
},
enter: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 1, height: '1.6em' },
{ complete: done }
)
}, delay)
},
leave: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 0, height: 0 },
{ complete: done }
)
}, delay)
}
}
})
new Vue({
el: '#demo',
data: {
query: '',
list: [
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
},
computed: {
computedList: function () {
var vm = this
return this.list.filter(function (item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}
}
})
</script>
</html>
注意: transition-group的子元素必须带上key,否则不显示。