vue中的js动画与Velocity.js结合
<div id='app'>
<transition
@before-enter='handleBeforeEnter'
>
<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;
},
handleBeforeEnter:function(el){
el.style.color='red'
}
}
})
</script>
<div id='app'>
<transition
@before-enter='handleBeforeEnter'
@enter='handleEnter'
>
<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;
},
handleBeforeEnter:function(el){
el.style.color='red'
},
handleEnter:function(el,done){
setTimeout(function(){
el.style.color='green';
done();
},2000);
}
}
})
</script>
<div id='app'>
<transition
@before-enter='handleBeforeEnter'
@enter='handleEnter'
@after-enter='handleAfterEnter'
>
<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;
},
handleBeforeEnter:function(el){
el.style.color='red'
},
handleEnter:function(el,done){
setTimeout(function(){
el.style.color='green';
},2000);
setTimeout(function(){
done();
},4000)
},
handleAfterEnter:function(el){
el.style.color='black'
}
}
})
</script>
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="./vue.js"></script>
<script src="../velocity.js"></script>
</head>
<body>
<div id='app'>
<transition
@before-enter='handleBeforeEnter'
@enter='handleEnter'
@after-enter='handleAfterEnter'
>
<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;
},
handleBeforeEnter:function(el){
el.style.opacity=0;
},
handleEnter:function(el,done){
Velocity(el,{
opacity:1
},{
duration:1000,
complete:done
})
},
handleAfterEnter:function(el){
console.log('动画结束')
}
}
})
</script>
</body>
</html>
vue中的js动画与Velocity.js结合的更多相关文章
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
- Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...
- JQuery动画插件Velocity.js发布：更快的动画切换速度
5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- vue中可以自定义动画的前缀
vue中可以自定义动画的前缀1.只需在中加入name属性即可 <transition name="my"> <h6 v-if="flag2"& ...
- javascript动画：velocity.js学习
第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...
- vue 中如何对公共css、 js 方法进行单文件统一管理，全局调用
1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...
- vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...
- 聊聊JS动画库:Velocity.js
前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...
随机推荐
- shell 获取hive表结构
hive -S -e "select * from db_name.table_name limit 0"|grep table_name|xargs -n1|sed 's/tab ...
- pip 安装库的时候使用豆瓣镜像 提升效率
由于众所周知的原因,国内网络环境始终处于水深火热之中,python库的安装也不例外. 比如在安装 PyQt5-tools 的时候,网速奇慢无比. 好在国内有不少镜像服务源,以豆瓣为例,网速突飞猛进 使 ...
- PHP、thinkPHP5.0开发网站文件管理功能（一）显示文件
显示文件用到的函数有 1.urlencode($str):编码URL字符串,便于将字符串编码并将其用于URL的请求部分 2.urldecode($str):解码已经编码的URL字符串,返回解码后的字符 ...
- Jenkins遇到哪些坑~
1Jenkins关闭和重启实现方式. 1.关闭Jenkins 只需要在访问jenkins服务器的网址url地址后加上exit.例如我jenkins的地址http://localhost:8080/ ...
- leetcode 437. 路径总和 III
题目描述: 给定一个二叉树,它的每个结点都存放着一个整数值. 找出路径和等于给定数值的路径总数. 路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点). 二 ...
- python dataframe drop_duplicates用法技巧去重
data.drop_duplicates()#data中一行元素全部相同时才去除 data.drop_duplicates(['a','b'])#data根据’a','b'组合列删除重复项,默认保留第 ...
- leetcode 182. Duplicate Emails having的用法 SQL执行顺序
https://leetcode.com/problems/duplicate-emails/description/ 首先sql的执行顺序是 from-->where-->group b ...
- Murano Weekly Meeting 2016.05.17
Meeting time: 2016.May.17 1:00~2:00 Chairperson: Kirill Zaitsev, from Mirantis Meeting summary: 1 ...
- Spark生态系统
在大数据非常流行的今天,每个行业都在谈论大数据,每个公司(互联网公司,传统企业,金融行业等)都在讨论大数据.高层管理者利用大数据来进行决策:数据科学家利用大数据来进行业务创新:程序员利用大数据来完成项 ...
- Cannot convert value '0000-00-00 00:00:00' from column 1 to TIMESTAMP解决办法
在Mysql数据库中使用DATETIME类型来存储时间,使用JDBC中读取这个字段的时候,应该使用 ResultSet.getTimestamp(),这样会得到一个java.sql.Timestamp ...