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 可以通过回调函数判断动画 ...
随机推荐
- 认识BACnet协议
一.什么是BACnet? BACnet,Building Automation and Control networks的简称,即楼宇自动化与控制网络.是用于智能建筑的通信协议. 一般楼宇自控设备从功 ...
- Apache Kafka官方文档翻译（原创）
Apache Kafka是一个分布式流平台.准确的说是什么意思呢?我们认为流平台具有三种关键能力: 1.让你对数据流进行发布订阅.因此他很像一个消息队列和企业级消息系统. 2.让你以高容错的方式存储数 ...
- Lightoj 1010 - Knights in Chessboard (胡搞)
题目连接: http://www.lightoj.com/volume_showproblem.php?problem=1010 题目描述: 有一个n*m的棋盘,根据象棋中马走日字的规则,问此棋盘最多 ...
- Windows Server 2008 R2关闭FTP服务
公司在ZJ的项目给了一台互联网可以访问的测试服务器,但是只给了三个访问端口,而且还做了映射. 映射信息如下:[1050->3389,1051->50000,1053->21] 其中1 ...
- H5调用百度地图API获取地理位置
<script src="http://api.map.baidu.com/api?v=2.0&ak=填入申请的AK"></script> < ...
- [ CodeForces 1059 C ] Sequence Transformation
\(\\\) \(Description\) 你现在有大小为\(N\)的一个数集,数字分别为 \(1,2,3,...N\) ,进行\(N\)轮一下操作: 输出当前数集内所有数的\(GCD\) 从数集中 ...
- sql Server与ORACLE的语法区别 自用整理！
/*整理背景201403订单中心数据库迁移(整理Oracle与SQL的差异)整理规则第一句为SQL Server 第二句为Oracle*/--数据类型int integervarchar varcha ...
- Probabilistic locking in SQLite
In SQLite, a reader/writer lock mechanism is required to control the multi-process concurrent access ...
- C语言入门100题，考算法的居多
入门题,考算法的居多,共同学习! 1. 编程,统计在所输入的50个实数中有多少个正数.多少个负数.多少个零. 2. 编程,计算并输出方程X2+Y2=1989的所有整数解. 3. 编程,输入一个10进制 ...
- 如何利用CSS中的ime-mode用来控制页面上文本框中的全角/半角输入
css 之 ime-mode语法:ime-mode : auto | active | inactive | disabled取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode ...