SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 

 

	<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)
                    }
                }
            })

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄