vue如何进行动画的封装

本文实例为大家分享了vue动画封装的具体代码，供大家参考，具体内容如下

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

有时候这种渐隐渐现的效果用的比较多，要复用，需要封装一下，怎么封装呢

<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，除了这样，还可以样式一起封装进去

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。