vue如何进行动画的封装
2018-09-26 08:34
736 查看
本文实例为大家分享了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如何处理返回数据,再进行分类展示
- 最新的vue没有dev-server.js文件,如何进行后台数据模拟?
- vue如何使用rules对表单字段进行校验
- Vue项目中对axios进行封装以及api接口请求
- Jquery 自定义动画同步进行如何实现?
- vue.js 2.x 版本脚手架中没有dev-server.js 如何进行数据模拟
- 如何对Linux虚拟机进行封装
- vue如何像Element那样封装组件
- vue.js如何将echarts封装为组件一键使用详解
- xUtils如何通过注解对FindViewById进行封装
- vue里面的scroll事件,以及如何处理事件问题,附带动画效果如何实现
- VUE 学习笔记之,如何对公共JS,CSS进行统一管理,全局调用
- Vue.js如何优雅的进行form validation
- u3d_插件DoTween:(02)如何对变量进行动画
- 如何在vue里添加好看的lottie动画
- 如何对OkHttp进行封装?
- 如何使用Enigma Virtual Box进行单文件绿色可执行软件的封装
- xUtils如何通过注解对FindViewById进行封装
- 爬坑日记--------vue如何与后端进行交互