050——VUE中使用js库控制vue过渡动作
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>使用js库控制vue过渡动作</title>
<script src="vue.js"></script>
<script src="velocity.js"></script>
</head>
<body>
<!--
velocity官网：http://velocityjs.org/
Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，
并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。
Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、
转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。 它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation，
是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，
最低可兼容到 IE8 和 Android 2.3。
-->
<div id="demo">
<button @click="type=!type">显示/隐藏</button>
<transition @before-enter="beforEnter" @enter="enter" @leave="leave" :css="false">
<h1 v-if="type">百度一下就知道</h1>
</transition>
</div>
<script>
new Vue({
el:"#demo",
data:{
type:false
},
methods:{
beforEnter(el){
el.style.opacity=0;
},
enter(el,done){
Velocity(el,{opacity:1},{duration:2000,complete:done});
},
leave(el,done){
Velocity(el,{opacity:0},{duration:2000,complete:done});
}
}
});
</script> </body> </html>
050——VUE中使用js库控制vue过渡动作的更多相关文章
- 关于Vue中main.js，App.vue，index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
- vue中eslintrc.js配置最详细介绍
本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
- vue中的js引入图片，必须require进来
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...
- vue中的js引入图片，使用require相关问题
vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...
- vue中的js动画与Velocity.js结合
vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...
- 在Vue将第三方JS库封装为组件使用
第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...
- 必备技能六、Vue框架引入JS库的正确姿势
在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...
- vue中创建js文件使用export抛出函数，import引入后不能绑定HTML的问题
在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...
随机推荐
- Python开发【项目】：大型模拟战争游戏（外星人入侵）
外星人入侵 游戏概述: 现在准备用python开始搞一个大型游戏,模拟未来战争,地球人狙击外星人大战(其实就是小蜜蜂游戏2333),玩家控制一个飞船,用子弹歼灭屏幕上空的外星飞船:项目用到了Pygam ...
- ubuntu常用操作命令以及它的通道模式简解
1.tail tail -f filename :可以动态查看文件的写入,按ctrl+c结束查看. 要显示 notes 文件的最后十行,输入: tail -n -10 notes tail notes ...
- 循环链表的实现与操作(C语言实现)
循环链表是还有一种形式的链式存贮结构.它的特点是表中最后一个结点的指针域指向头结点,整个链表形成一个环. 循环链表的操作 1,循环链表的新操作 2, 获取当前游标指向的数据元素 3, 将游标重置指向链 ...
- eclipse怎么导出可执行jar包
在eclpse中找到你要导出的java程序 选中它 单击文件 -->export 在弹出的export对话框中找到 jar File 单击选中-->next 按图示顺序依次 选好你的jav ...
- log4j2介绍及配置
一.log4j2概述 在日常的开发,测试和生产环境中,日志记录了应用,服务运行过程中的关键信息,以及出现异常时的堆栈,这些信息常常作为查询,定位,解决问题的关键,因此在任何系统中,对日志的使用得当,将 ...
- OpenResty--mysql,redis 项目中的应用
最近刚刚接手同事的OpenResty的项目,发现对mysql,redis的操作没有用连接池,故对此进行了改造. MYSQL 主要是通过mysql_pool.lua 和 dbutil.lua 来封装对数 ...
- 前端基础（JavaScript）
JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...
- 系统管理命令之id
当我们想知道某个用户的UID和GID时id命令是非常有用的.一些程序可能需要UID/GID来运行.id使我们更加容易地找出用户的UID以GID而不必在/etc/group文件中搜寻. 1.获取指定用户 ...
- http之url和uri
HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接.URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息 URL,全称是U ...
- nmon监控Linux服务器系统资源
本文转自:http://www.cnblogs.com/hyzhou/archive/2011/12/29/2305860.html 在实际的测试过程中,Loadrunner监控Linux系统资源不太 ...