详解vue动画的封装

本文实例为大家分享了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 >

把样式一起封装进来，是比较推荐的方式。

前端精品教程：百度网盘下载

转载于:https://www.cnblogs.com/zanguixuan/p/9811149.html