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月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...
随机推荐
- Java——flush()方法
Java在使用流时,缓冲区是一种发送数据的高效方法,但当溢出缓冲区的部分需要用flush()方法强制将数据发送出去,不必等到缓冲区再次装满,尤其是在数据量特别小的情况下,如果不使用此方法,很容易出现流 ...
- sublime快捷键：快速查找函数和快速匹配括号
1. 快速查找函数 Ctrl+R 2. 快速匹配括号 光标置于括号中,Ctrl+Shift+M 快速匹配括号内容,再按下 Ctrl+Shift+[ 折叠代码, Ctrl+Shift+] 展开代码. 3 ...
- sf04_操作系统中 heap 和 stack 的区别
概述 本文分三部分,描述有所重叠,但可以让你对栈与堆有一个比较清晰.全面的认识 heap 和 stack是什么 堆栈是两种数据结构.堆栈都是一种数据项按序排列的数据结构,只能在一端(称为栈顶(top) ...
- java——线段树 SegmentTree
应用: 区间染色 区间查询 线段树不是完全二叉树,线段树是平衡二叉树 使用数组来实现线段树:存储空间为4n 以下是使用数组实现的静态线段树: public class SegmentTree<E ...
- 数据结构---Java---LinkedList
public class LinkedList<E> extends AbstractSequentialList<E> implements List<E>, D ...
- 配置wordpress
安装教程 软件介绍 WordPress以它的易于安装而出名.在大多数情况下,安装WordPress是一个很简单的事情,并且花不到5分钟就可以搞定.现在很多web主机都提供自动安装WordPress的工 ...
- Murano Weekly Meeting 2016.05.24
Meeting time: 2016.May.24 1:00~2:00 Chairperson: Kirill Zaitsev, from Mirantis Meeting summary: 1.A ...
- 用Jmeter 测试接口--需要登录怎么办？
一.试用场景---当你测试的接口 需要登录,然后 你又不知道怎么让这测这个接口前登录?这篇文章写得是 用静态的Token 值,来测试需要登录的接口 二.步骤 1 首相用Jmeter 将要测试的接 ...
- 硬盘和显卡的访问与控制（一）——《x86汇编语言：从实模式到保护模式》读书笔记01
本文是<x86汇编语言:从实模式到保护模式>(电子工业出版社)的读书实验笔记. 这篇文章我们先不分析代码,而是说一下在Bochs环境下如何看到实验结果. 需要的源码文件 第一个文件是加载程 ...
- git 摘要
git使用摘记 git冲突的问题主要是在修改的部分而不是添加的部分, 如果merge的文件在同一个位置有不同的信息则git会报错 git push origin中的origin表示的是远程的仓库名为o ...