項目引用了velocity.js，下載地址 http://velocityjs.org 。 本文是個學習筆記
<body>
<div id="root">
<comp :dis="show">
<div>hello</div>
</comp>
<comp :dis="show">
<h1>hello</h1>
</comp>
<button @click="btnclick">toggle</button>
</div>
<script>
let comp = {//封裝的組件
props:["dis"],
template:`
<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
@before-leave="handleBeforeLeave"
@leave="handleLeave"
@after-leave="handleAfterLeave"
>
<slot v-if="dis"></slot>
</transition>
`,
methods:{
handleBeforeEnter:function(el){
el.style.opacity = 0;
},
handleEnter:function(el,done){
Velocity(el,{opacity:1},{duration:1000,
complate:done
})
},
handleAfterEnter:function(el){},
handleBeforeLeave:function(el){},
handleLeave:function(el,done){
Velocity(el,{opacity:0},{
duration:1000,
complate:done //done是必須的,觸發之後,纔會走下一階段handleAfterLeave，可以查看http://velocityjs.org/#beginAndComplete
})
},
handleAfterLeave:function(el){
el.style.opacity = 0;
}
}
}
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
btnclick:function(){
this.show = !this.show;
}
},
components:{
comp
}
})
</script>
</body>