当前位置 : 主页 > 手机开发 > 其它 >

Vue的动画封装

来源:互联网 收集:自由互联 发布时间:2021-06-19
fade :show="show" divhello world/div/fade 方法一:transition的封装 Vue.component(‘fade‘,{ props:[‘show‘], template:` transition slot v-if ="show" / slot / transition ` }) 方法二:js封装 Vue.component(‘fade‘,{ props:

 

 

 

 

	<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)
                    }
                }
            })
             
网友评论