vue如何进行动画的封装
时间:2022-06-25 15:36:49 编辑:袖梨 来源:一聚教程网
本文实例为大家分享了vue动画封装的具体代码,供大家参考,具体内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | < style > .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition:opacity 1s; } </ style > < div id = "app" > < transition > < div v-if = "show" >hello world</ div > </ transition > < button @ click = "handleClick" >切换</ button > </ div > < script > var vm = new Vue({ el:'#app', data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show; } } }) </ script > |
有时候这种渐隐渐现的效果用的比较多,要复用,需要封装一下,怎么封装呢
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | < style > .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition:opacity 1s; } </ style > < div id = "app" > < fade :show = "show" > < div >hello world</ div > </ fade > < fade :show = "show" > < h1 >hello world</ h1 > </ fade > < button @ click = "handleClick" >切换</ button > </ div > < script > Vue.component('fade',{ props:['show'], template: ` < transition > < slot v-if = 'show' ></ slot > </ transition > ` }) var vm = new Vue({ el:'#app', data:{ show:false }, methods:{ handleClick:function(){ this.show = !this.show; } } }) </ script > |
可以这样封装,将dom元素传入slot,除了这样,还可以样式一起封装进去
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | < div id = "app" > < fade :show = "show" > < div >hello world</ div > </ fade > < fade :show = "show" > < h1 >hello world</ h1 > </ fade > < button @ click = "handleClick" >切换</ button > </ div > < script > Vue.component('fade',{ props:['show'], template: ` < transition @ before-enter = 'handleBeforeEnter' @ enter = 'handleEnter' > < slot v-if = 'show' ></ slot > </ transition > `, methods:{ handleBeforeEnter:function(el){ el.style.color='red' }, handleEnter:function(el,done){ setTimeout(()=>{ el.style.color='green'; done(); },2000) } } }) var vm = new Vue({ el:'#app', data:{ show:false }, methods:{ handleClick:function(){ this.show = !this.show; } } }) </ script > |
把样式一起封装进来,是比较推荐的方式。