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 可以通过回调函数判断动画 ...
随机推荐
- SP1043 GSS1 - Can you answer these queries I（猫树）
给出了序列A[1],A[2],…,A[N]. (a[i]≤15007,1≤N≤50000).查询定义如下: 查询(x,y)=max{a[i]+a[i+1]+...+a[j]:x≤i≤j≤y}. 给定M ...
- [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照（3）上传 App 预览和屏幕快照
请上传至多三个 App 预览和至多十张屏幕快照.如果您的 App 在不同设备尺寸和本地化内容间都相同,仅提供所要求的最高分辨率的屏幕快照即可. 对于 iPhone,必须提供用于 5.5 英寸设备(iP ...
- lnmp环境的nginx的tp5配置
php7.1 server { listen 80; server_name www.tp5.com; access_log /home/wwwroot/access.log combined; er ...
- spring 简单实现BeanFactory（转）
原文地址: http://blog.csdn.net/mlc1218559742/article/details/52776160 有没有发现上面的代码与利用反射实现工厂模式的代码很相似.对,你没有看 ...
- DFS POJ 3087 Shuffle'm Up
题目传送门 /* 题意:两块扑克牌按照顺序叠起来后,把下半部分给第一块,上半部给第二块,一直持续下去,直到叠成指定的样子 DFS:直接模拟搜索,用map记录该字符串是否被搜过.读懂题目是关键. */ ...
- 231 Power of Two 2的幂
给定一个整数,写一个函数来判断它是否是2的幂. 详见:https://leetcode.com/problems/power-of-two/description/ Java实现: class Sol ...
- [转]MVC4项目中验证用户登录一个特性就搞定
本文转自:http://www.mrhuo.com/Article/Details/470/A-Attribute-For-MVC4-Project-Used-To-Validate-User-Log ...
- 生成清除某个数据库下的所有表的SQL语句
方法1:重建库和表 用mysqldump --no-data把建表SQL导出来,然后drop database再create database,执行一下导出的SQL文件: 方法2:生成清空所有表的SQ ...
- 第2章 JavaScript语法
1.最好的做法是把<script>标签放到html文档的最后,</body>标签之前. 举例: ...... <script src="file.js" ...
- Python学习日记之记录
列表 list=['1','2'] 元组 zoo=('1','2''3') 字典 d = {key1 : value1, key2 : value2 }