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>
<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 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- vue中axios的封装以及简单使用
一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...
- vue中动画的使用
不要在router-view的外层使用动画!不要在router-view的外层使用动画!不要在router-view的外层使用动画! 重要的事情说三遍,在app.vue中自以为奇思妙想(实际是脑残)在 ...
- vue中axios的封装
第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...
- vue 中动画配置
<transition name="fade"> <router-view ></router-view> </transition& ...
- vue中的axios封装
import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000;axios ...
- vue中利用Promise封装jsonp并调取数据
Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功).Rejected(失败 ...
随机推荐
- 隐藏win10中“此电脑”里的6个子文件夹
删除点击此电脑后6个子文件夹 运行regedit: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Fold ...
- windows 远程到ubuntu桌面
Windows remote connect ubuntu desktop 1. install xRDP sudo apt-get update sudo apt-get install xrdp ...
- Microsoft使用技巧
1.拍摄屏幕内容的截图 按 Win + Shift + S 以打开截图栏,然后将光标拖动到要捕获的区域. 截图区域将保存到剪贴板. 2.使用键盘添加表情符号 随心随处表达自我. 按 Ctrl + Sh ...
- VBS 学习
VBS其他功能 获取系统用户名 DimWshNetwork Set WshNetwork =CreateObject("WScript.Network") strTaccount ...
- Redis Intro - Skiplist
http://zhangtielei.com/posts/blog-redis-skiplist.html https://juejin.im/entry/59197a390ce4630069fbcf ...
- ubuntu14.04通过 gvm 安装 go语言开发环境
最近用回了ubuntu ,所以打算安装golang学习当下比较火热的这个语言 本来打算使用 sudo apt-get install golang的 安装后发现 是1.2.1不是最新版 所以上网上搜了 ...
- 连接虚机中的mysql服务
1:修改mysql库中的user表的root用户的host值为% 2:授权:在mysql命令中执行 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFI ...
- IE浏览器兼容性问题解决方案
一.CSS常见问题 1.H5标签兼容性 解决方案:<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.j ...
- VMWare 9 安装 win8
http://tieba.baidu.com/p/1954912175 http://down.51cto.com/data/497803 win8专业版:NBCCB-JJJDX-PKBKJ-KQX8 ...
- BZOJ1563: [NOI2009]诗人小G(决策单调性 前缀和 dp)
题意 题目链接 Sol 很显然的一个dp方程 \(f_i = min(f_j + (sum_i - sum_j - 1 - L)^P)\) 其中\(sum_i = \sum_{j = 1}^i len ...