vue用js部分控制动画实现
上次我们提到用vue实现过渡动画，其实只讲了vue动画的一部分，用vue自带的css状态控制动画实现，不带js
http://www.cnblogs.com/null11/p/7081506.html
在vue中，还有一种方式控制动画的实现，那就是用js控制动画的状态
分别是下面3种状态
:before-enter="名字" 动画进入之前
:enter="名字" 动画进入后
:leave="名字" 动画进入结束
下面我们看看实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://tool.oschina.net/js/jquery/jquery-1.7.2.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
#app{
position: relative;
width: 100%;
height: 30px;
}
.animate-p{
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="app">
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<span class="animate-p" v-show="show">快看啦</span>
</transition>
<br>
<button @click="show =! show">toggle</button>
</div> </body>
</html>
html部分，因为动画控制，我采用了jquery的animate动画函数，大家以后vue做东西时候，尽量干净，用vue就不要用jquery
上面我们采用了vue内置动画组件transition，并且我们绑定了动画的3中状态
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
还是上次那种图，进入之前，进入中，进入后
下面我们开始写js部分控制了
new Vue({
el:'#app',
data:{
show:true
},
methods: {
//进入之前
beforeEnter: function(el){
$(el).css({
left:"-500px",
opacity:0
})
},
//进入中
enter: function(el,done){
$(el).stop().animate({
left:0,
opacity:1
},{
duration:1500,
complete:done
},5000)
},
//结束
leave: function(el,done){
$(el).stop().animate({
left:"500px",
opacity:0
},{
duration:1500,
complete:done
},5000)
}
}
});
我们对应三种动画状态就ok了，是不是很简单
vue用js部分控制动画实现的更多相关文章
- 050——VUE中使用js库控制vue过渡动作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
- js课程 5-14 js如何实现控制动画角色走动
js课程 5-14 js如何实现控制动画角色走动 一.总结 一句话总结:首先是onkeydown事件,然后是改变元素的left和top属性 1.常用键盘事件有哪些? • onkeydown和 onke ...
- vue.js之过渡动画
vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...
- Vue使用过渡类名实现动画和自定义前缀
Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...
- 黑马vue---46、vue使用过渡类名实现动画
黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
随机推荐
- P3256 [JLOI2013]赛车
传送门 如果把速度看成斜率,起始位置看成截距,这就是一个水平可见直线了-- 不过这题里我实现方法借鉴了CQzhangyu大佬的,先按速度排序,然后维护一个单调栈,如果当前的人速度比栈顶大距离又比它远直 ...
- c++ gets函数
函数名称:gets函数 函数结构:gets() 所需头文件:#include<cstdio> 函数作用:持续读入,直到遇到换行停止输出.
- Linux上安装禅道
linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道. 从7.3版本开始,linux一键安装包分为32位和64位两个包,请大家根据操作系统的情况下载 ...
- E - Easy Dijkstra Problem（求最短路）
Description Determine the shortest path between the specified vertices in the graph given in the inp ...
- EntityFramework（转自wiki）
维基百科 Entity Framework (又称ADO.NET Entity Framework) 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping)解决方案,早期 ...
- JavaScript01天学习笔记分享
01知识点 JavaScript 代码运行在浏览器(后缀名.js) 和java完全不同的东西,只是名称类型而已 src 引用脚本 <Script></Script> ale ...
- 窗体基础WINFORM
winform 1.窗体: 造窗体界面: 窗体设计界面: 窗体类名不能重复! 属性: acceptbutton:回车是默认点击按钮 cancelbutton:按esc按键式默认的按钮 backcolo ...
- linux创建ftp用户以及指定目录问题
linux创建ftp用户以及指定目录问题 创建用户命令:如我的目录是根目录下的 MyWeb 用户名:xdh2571 #useradd -G ftp -d /MyWeb -M xdh2571#passw ...
- js中true和false判断
布尔类型里只有这6参数个返回false,其它都为true Boolean(false) // false Boolean(undefined) // false Boolean(null) // fa ...
- 联想 Vibe Shot(Z90-3) 免recovery 获取ROOT权限 救砖 VIBEUI V3.1_1625
>>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...