Vue的动画封装

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30416497

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yubaibai/p/10721086.html

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