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 可以通过回调函数判断动画 ...
随机推荐
- bzoj4534: 基础排序算法练习题
传送门 策爷的论文题啊……题解在这儿 我只想知道为什么这题的弱化版会出现在我们今天的%你赛里…… 题意:给你一堆操作$(l,r)$,表示将区间$(l,r)$按升序排序.以及$q$个询问,每次询 ...
- BADI FCODE(菜单) 增强
菜单增强功能只能用于非依赖于过滤器的一次性BADI(不是多用途的). 目前,菜单增强功能只能与程序增强功能(界面)一起创建. 定义一个没有过滤器的一次性增强 2.Classic Badi在FCODE ...
- [Qt Creator 快速入门] 第5章 应用程序主窗口
对于日常见到的应用程序而言,许多都是基于主窗口的,主窗口中包含了菜单栏.工具栏.状态栏和中心区域等.这一章会详细介绍主窗口的每一个部分,还会涉及资源管理.富文本处理.拖放操作和文档打印等相关内容.重点 ...
- Linux上安装wine qq的方法
linxu上安装QQ的发 百度网盘 提取码:f2sn 步骤一.安装wine(详见:https://www.winehq.org/download) // ubuntu/ubuntukylin/mint ...
- [转]ASP .NET MVC 之Entity Framework- code first
本文转自:http://www.cnblogs.com/tomin/archive/2012/02/29/MVC_EntityFramework.html 最近,用到了ASP.NET MVC Ent ...
- jQuery学习笔记(4)-设置元素的属性和样式
一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...
- Python_购物车问题
import os goods = [ {"name": "电脑", "price": 1999}, {"name&q ...
- Python基础：基本数据类型
python基本标准6类数据类型:Number数字, String字符串, List列表,Tuple元组,Set集合,Dictionary字典 不可变数据3个(Number数字,String字符串,T ...
- Android 网络图片查看器与网页源码查看器
在AndroidManifest.xml里面先添加访问网络的权限: <uses-permission android:name="android.permission.INTERNET ...
- jQuery之基本选择器Practice
一.在输入框中输入数字,点击按钮,实现对应事件的功能. html代码: <input id="txt1" type="text" value=" ...