vue如何进行动画的封装


Posted in Javascript onSeptember 26, 2018

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

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

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

Javascript 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
vue自定义指令实现方法详解
Feb 11 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 #Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 #Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 #Javascript
vue单页缓存方案分析及实现
Sep 25 #Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 #Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 #Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 #Javascript
You might like
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
python交易记录整合交易类详解
2019/07/03 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
JAVA和C++的区别
2013/10/06 面试题
小学生国庆节演讲稿
2014/09/05 职场文书
毕业证委托书范文
2014/09/26 职场文书
模范班主任事迹材料
2014/12/17 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
Python常遇到的错误和异常
2021/11/02 Python
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript