Vue.component('my-transition', {
template:`
<transition-group
name="staggered-fade"
tag="ul"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave">
<slot></slot>
</transition-group>`,
props:['query', 'list'],
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)
}
}
})
var app5 = new Vue({
el:'#app5',
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
})
}
},
})
效果与上一个例子一致：
但是函数组件更适合完成这个任务。由于暂时还没有学到render函数，所以暂时先不实现render函数组件。后面学到的时候再做打算。
动态过渡
在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 name 特性来绑定动态值。
<transition v-bind:name="transitionName">
<!-- ... -->
</transition>当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画 在不同过渡间切换会非常有用。
所有的过渡特性都是动态绑定。它不仅是简单的特性，通过事件的钩子函数方法，可以在获取到相应上下文数据。这意味着，可以根据组件的状态通过 JavaScript 过渡设置不同的过渡效果。
<div id="app6">
Fade In:
<input type="range" v-model="fadeInDuration" min="0" :max="maxFadeDuration">
Fade Out:
<input type="range" v-model="fadeOutDuration" min="0" :max="maxFadeDuration">
<transition
v-bind:css="false"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave">
<p v-if="show">hello chain</p>
</transition>
<button @click="stop = true">Stop it</button>
