列表的渐进过渡
通过 data 属性与 JavaScript 通信 ，就可以实现列表的渐进过渡：
<div id="app4">
<input v-model="query">
<transition-group
name="staggered-fade"
tag="ul"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave">
<li v-for="(item, index) in computedList"
:key="item.msg"
:data-index="index">
{{item.msg}}
</li>
</transition-group>
</div>
var app4 = new Vue({
el:'#app4',
data:{
query:'',
list:[
{msg:'Bruce Lee'},
{msg:'Jackie Chan'},
{msg:'Chuck Norris'},
{msg:'Jet Li'},
{msg:'Kung Furry'},
{msg:'Chain Zhang'},
{msg:'Iris Zhao'},
] },
computed:{
computedList:function () {
var vm = this
return this.list.filter(function (item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}
},
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)
}
}
})上述js代码需要添加对Velocity引用：
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>运行结果如下：
可复用的过渡
过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将<transition>或者 <transition-group>作为根组件，然后将任何子组件放置在其中就可以了。
下面的例子是将上一个列表渐进过渡的例子改为可复用的过渡的源码：
<div id="app5">
<input v-model="query">
<my-transition :query="query" :list="list">
<li v-for="(item, index) in computedList"
:key="item.msg"
:data-index="index">
{{item.msg}}
</li>
</my-transition>
</div>
