首页 / VUE / vue如何进行动画的封装
vue如何进行动画的封装
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue如何进行动画的封装,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1697字,纯文字阅读大概需要3分钟。
内容图文
本文实例为大家分享了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>
把样式一起封装进来,是比较推荐的方式。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的vue如何进行动画的封装全部内容,希望文章能够帮你解决vue如何进行动画的封装所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。