vue中的js动画与Velocity.js结合
2024-08-29 01:14:48
vue里面除了用css写动画，还可以用js写动画，vue的transition中，定义了几个动画钩子
第一个动画钩子：@before-enter
<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>
在vue的transition中，在显示数据前，会自动触发before-enter这个事件，比如上面
第二个动画钩子：@enter
<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>
在执行动画的时候，会触发@enter这个事件，我们大部分动画流程都是写在这里吗，这个事件跟@before-enter，有点不一样的地方就是，多了一个参数done,在执行完后，回调一下done()，告诉vue，动画执行完了，vue好执行下一个钩子函数
第三个钩子函数:@after-enter
<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>
@after-enter在动画执行完后的处理
同理，有入场动画，就有出场动画
分别是before-leave,leave,after-leave
有了这些基础后，就可以写更复杂的动画效果了，我们可以引入一个库，叫做velocity.js
http://velocityjs.org/
打开velocity的官网，下载下来到本地
栗子：
<!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>
这里就用了Velocity来实现这个动画效果,通过这个可以写出非常酷炫的动画
最新文章
- ashx中Response.ContentType的常用类型
- Net作业调度(四)—quartz.net持久化和集群
- MongoDB分片(sharding)
- 【JavaScript】【CSS】前端规则摘抄
- 安装运行Hadoop
- TFS二次开发系列：二、TFS的安装
- Oracle sys和system用户、sysdba 和sysoper系统权限、sysdba和dba角色的区别
- ASP.NET Web API（三）：安全验证之使用摘要认证(digest authentication)
- 构建ASP.NET网站十大必备工具(2)
- C中宏展开问题
- PHP 解决时差8小时的问题
- 【转】iOS-Core-Animation-Advanced-Techniques（三）
- oracle中文支持
- 自己写一个网页版的Markdown实时编辑器
- 『练手』005 Laura.SqlForever历史遗留 的 架构思想缺陷
- P1308 统计单词数
- 最大似然概率（MLE）和最大后验概率（MAP）
- MFC不可不会
- qrcodebox 面向移动设备的二维码弹出框
- sql中的group by 和 having 用法解析
热门文章
- 4.AOP
- 一行CMD命令kill(杀)掉你的进程
- thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息
- java——设计一个支持push，pop，top、在恒定时间内检索最小元素的栈。
- strcpy/strlen/strcat/strcmp的实现
- python 获取当前时间及前一天时间
- fireFox在中国的https网站的时候，老会出 ssl_error_unsupported_version 这个错误。
- (转)Python3.5 day3作业二：修改haproxy配置文件
- vs2012配置使用entity framework 6
- swing线程机制