详解vue动画的封装
本文实例为大家分享了vue动画封装的具体代码，供大家参考，具体内容如下
前端精品教程：百度网盘下载
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<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>
|
有时候这种渐隐渐现的效果用的比较多，要复用，需要封装一下，怎么封装呢
前端精品教程：百度网盘下载
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<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，除了这样，还可以样式一起封装进去
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<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>
|
把样式一起封装进来，是比较推荐的方式。
前端精品教程：百度网盘下载
转载于:https://www.cnblogs.com/zanguixuan/p/9811149.html
详解vue动画的封装相关推荐
- 详解 Vue 目录及配置文件之 build 目录
详解 Vue 目录及配置文件之 build 目录 1.1 项目目录介绍 目录/文件 说明 详解 build 项目构建(webpack)相关代码 详解 config 配置目录,包括端口号等 详解 nod ...
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式 在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
- layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法
详解Vue.js和layui日期控件冲突问题解决办法 发布于 2020-8-10| 复制链接 摘记: 事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果 ...
- 详解Vue中watch的高级用法
转载自 详解Vue中watch的高级用法 我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
- vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
组件 选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}} javaScript代码 export default { name: "cam ...
- render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现 功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
最新文章
- Ubuntu 系统打不开图片提示Fatal error reading PNG image File: Not a PNG file
- 今天带你们走进缓存的雪崩、击穿、穿透基本概念
- 互联网协议 — FTP 文件传输协议
- tensorflow神经网络拟合非线性函数与操作指南
- C++静态成员函数小结
- B站一季度营收超预期，月活跃用户达1.72亿
- LeetCode Algorithm 1267. 统计参与通信的服务器
- 微软bi 架构 服务器,微软BI体系结构.
- java获取文件名方法,利用Java获取文件名、类名、方法名和行号的方法小结
- 新员工入职表_招人难，留人难！超市如何留住新员工
- android re浏览器下载,RE文件浏览器
- 十四代装系统前RAID配置
- 青浦区服务器维修,青浦区DNS服务器地址
- Mutual Component Convolutional Neural Networks for Heterogeneous Face Recognition阅读笔记
- html圆圈里面问号,UTF-8编码的html页面显示-（问号）而不是字符
- 如何结束python程序_python程序结束
- 第三方支付如何帮助在线教育打通支付
- c语言的字符串不是存放,在C语言中，字符串不存放在一个变量中，而是存放在一个中...
- iteye上总结的编程精华资源
- #Eclipse IDE for Java EE Developers 的下载及初步使用