Vue的动画封装

 

 

 

 

	<fade :show="show"> 
				<div>hello world</div>
			</fade>

　　

 

 

方法一：transition的封装

            Vue.component('fade',{
                props:['show'],
                
                template:`<transition><slot v-if="show"></slot></transition>`
            })
            

方法二：js封装

            Vue.component('fade',{
                props:['show'],
                
                template:`<transition @before-enter="bfe" @enter="enter"><slot v-if="show"></slot></transition>`,
                methods:{
                    
                    bfe:function(el){
                        el.style.color='red'
                    },
                    emter:function(el){
                        setTimeout(()=>{
                            el.style.color='green'
                            done()
                        },2000)
                    }
                }
            })