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

猜你喜欢

转载自www.cnblogs.com/yubaibai/p/10721086.html