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 相关文章推荐
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
从原生JavaScript到React深入理解
Jul 23 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP生成plist数据的方法
2015/06/16 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
vue webpack重写cookie路径的方法
2019/07/10 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
简单了解Python3里的一些新特性
2019/07/13 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
python装饰器代码深入讲解
2021/03/01 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
优秀辅导员事迹材料
2014/02/16 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
银行资信证明
2015/06/17 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
Python 全局空间和局部空间
2022/04/06 Python