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(失败 ...
随机推荐
- my26_Slave failed to initialize relay log info structure from the repository
重启了一下从库,忘记先stop slave ,直接mysqladmin shutdown关闭实例,结果起不来了 mysql> start slave;ERROR 1872 (HY000): Sl ...
- python 数据可视化---Anscombe’s quartet
import seaborn as sns sns.set(style="ticks") # Load the example dataset for Anscombe's qua ...
- battery-historian结果分析
准备电量数据: 1. 断开adb服务 执行:adb kill-server 2. 开启adb服务 执行:adb start-server或者adb devices这两步操作的作用:adb作为一种连接的 ...
- oracle_expdp_help
[oracle@ctp ~]$ expdp -help Export: Release 11.2.0.3.0 - Production on Thu Feb 28 13:52:15 2019 Copy ...
- `aclocal-1.10' is missing on your system
root@ubuntu31:~/linux-ftools-master# makecd . && /bin/bash /root/linux-ftools-master/missing ...
- Tomcat安装和配置过程
tomcat的下载.配置.启动方法.网上教程乱七八糟,还是自己mark一下备用吧. 一.官网下载Tomcat的压缩包 Tomcat是Apache软件基金会的一个开源项目.登录Apache官网即可找到下 ...
- Andrew Ng 的 Machine Learning 课程学习 (week4) Multi-class Classification and Neural Networks
这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...
- Python四大神兽(迭代器&生成器&闭包&装饰器)
一.迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式.. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不 ...
- Vue.js基础语法(一)
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 前言: 前端解析数 ...
- hdu 3530 区间和在一定范围内最长区间
http://acm.hust.edu.cn/vjudge/problem/11253 这题要找到区间和在[m,k]范围内的最长区间 用两个单调序列保存区间最大值和最小值.当最大值-最小值>k时 ...