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 可以通过回调函数判断动画 ...
随机推荐
- 疫情控制 2012年NOIP全国联赛提高组(二分答案+贪心)
P1084 疫情控制 题目描述 H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树,1 号城市是首都,也是树中的根节点. H 国的首都爆发了一种危害性极高的传染病.当局为了控 ...
- redis的两种备份方式
Redis提供了两种持久化选项,分别是RDB和AOF. 默认情况下60秒刷新到disk一次[save 60 10000 当有1w条keys数据被改变时],Redis的数据集保存在叫dump.rdb一个 ...
- 2017杭电多校第五场Rikka with Subset
Rikka with Subset Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- Windows Install Twisted 安装Twisted
1.下载twisted exe https://twistedmatrix.com/Releases/Twisted/15.4/ (注意最新版16.x没有适用于windows的exe,只能用旧版) 2 ...
- System.AppDomain类详解（二）
进程是存在独立的内存和资源的,但是AppDomain仅仅是逻辑上的一种抽象.一个process可以存在多个AppDomain.各个AppDomain之间的数据时相互独立的.一个线程可以穿梭多个AppD ...
- 本地编译全志R系列的步骤（Ubuntu16.04.4版本）
本地编译全志R系列的步骤(Ubuntu16.04.4版本) 2018/6/14 9:32 版本:V1.0 0.获取全志R系列的Android源码包: 请通过渠道/代理商/方案公司获取全志R系列的And ...
- 通过机智云APP来学习安卓
效果非常之好,安卓6.0之后就进行了动态授权.按照网上的视频一步一步调试的非常成功,非常舒服.
- iframe子页面让父页面跳转 parent.location.href
if ($roleNum < 9) { echo "<script > parent.location.href='admin_login.php' </script ...
- 从输入URL到网页呈现的过程
1.域名解析当我们在浏览器中输入一个URL,例如”www.google.com”时,这个地址并不是谷歌网站真正意义上的地址.互联网上每一台计算机的唯一标识是它的IP地址,因此我们输入的网址首先需要先解 ...
- 汇编学习pushl, popl