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 相关文章推荐
input输入框的自动匹配(原生代码)
Mar 19 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
小程序实现多选框功能
Oct 30 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
python中偏函数partial用法实例分析
2015/07/08 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Python计算信息熵实例
2020/06/18 Python
教学实习自我评价
2014/01/28 职场文书
入党自荐书范文
2014/03/09 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
工程资料员岗位职责
2015/04/13 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
Python学习之迭代器详解
2022/04/01 Python