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月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...
随机推荐
- spring 通过beanDefinition注册自定义规则的bean
目的: 扫描某个自定义注解标注的类, 或者自定义xml 为这些类生成spring Bean 基本原理:org.springframework.beans.factory.support.Default ...
- shell中的命令与特殊符号
1.记录命令:! !!:连续的“!”表示执行上一次的指令 !n:表示执行命令历史中第二条指令 注:!2居然给我关机了 !字符串(字符串大于1)表示执行命令历史中最近的一次 2.通配符 " * ...
- 关于Yii2中的MVC中的视图总结（持续更新中）
一.首先在控制器中,将处理好的数据发送给前台: $this->layout = 'base'; 这里填写视图的模板文件(可以不写这行代码,如果不写,默认为views/layouts/main.p ...
- 18-----BBS论坛
BBS论坛(十八) 18.首页轮播图实现 (1)front/css/front_base.css .main-container{ width: 990px; margin: 0 auto; over ...
- Jquery ValidationEngine 修改验证提示框的位置
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python3+Appium自动化10-日志收集
日志概述 日志作用 日志是定位问题的重要手段 日志级别 级别 何时使用 DEBUG 调试信息,也是最详细的日志信息 INFO 证明事情按预期工作 WARNING 表明发生了一些意外,或者不就的将来(如 ...
- (转)Python中的split()函数的用法
Python中的split()函数的用法 原文:https://www.cnblogs.com/hjhsysu/p/5700347.html Python中有split()和os.path.split ...
- jQuery学习心得
表示在document.ready时执行代码 $(function(){ //1.取得要操作的对象(尽量只限制范围),如果对象多次使用要记得缓存 var $selector = $('selector ...
- jQuery Validate使用说明
jQuery Validate 导入 js 库 <script src="./jquery-validation/lib/jquery-1.8.3.js" type=&quo ...
- Xtrareport绘制行号
需要是用事件beforePrint (在打印数据之前的事件) private void xrTableCell12_BeforePrint(object sender, System.Drawing. ...