详解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>

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

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