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 ...
随机推荐
- Day22 文件上传下载和javaMail
day22总结 文件上传概述 1 文件上传的作用 例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2 文件上传对页面的要求 上传文件的要求比较多,需要 ...
- RSA与AES的区别
RSA 非对称加密,公钥加密,私钥解密,反之亦然.由于需要大数的乘幂求模等算法,运行速度慢,不易于硬件实现. 通常私钥长度有512bit,1024bit,2048bit,4096bit,长度越长,越安 ...
- js-template-art【二】语法
参看地址 一.模板语法 1.变量使用与输出 <% if (user) { %> <h2><%= user.name %></h2> <% } %& ...
- Mybatis怎么在mapper中用多个参数
原文地址:https://github.com/mybatis/mybatis-3/wiki/FAQ How do I use multiple parameters in a mapper? Jav ...
- 使用Github发布自己的网站
1.编写好自己的index.html 2.在github上新建一个分支,分支名需要按xxx.github.com(xxx为github账号名): 3.进入分支的setting界面,自动生成网页,会在分 ...
- 如何使用代码备份SQL Server数据库
1.添加引用 using Microsoft.SqlServer.Management.Smo; using Microsoft.SqlServer.Management.Common; 2. Bac ...
- 2017年浙江中医药大学程序设计竞赛 Solution
训练地址 A: 树剖板子题 求最小值的时候要注意值是不是有负数,如果有,初值要置为$-INF$ #include <bits/stdc++.h> using namespace std; ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON union1
zw版[转发·台湾nvp系列Delphi例程]HALCON union1 unit Unit1;interfaceuses Windows, Messages, SysUtils, Variants, ...
- zwPython，字王集成式python开发平台，比pythonXY更强大、更方便。
zwPython,字王集成式python开发平台,比pythonXY更强大.更方便. 更强大,内置opencv.cuda/opencl.NLTK自然语言.pygame游戏设计等多个重量级模块库. 更方 ...
- 【开源】检查更新程序 CheckUpdate.Net 的实现
访问最新源代码及更新历史:http://git.oschina.net/xcong/CheckUpdate.Net DownLoad 更新历史 version 1.2 [新增]添加UpdateFile ...