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 ...
随机推荐
- 【查看】mysql 常规书写注意事项（那些坑）
mysql 常规书写注意事项,mysql注意事项 1. 注释: -- 后面一定要加一个空格,否则会报错 2.注释:/*! content */ 在mysql中是会执行的,但是其他数据库不会. 例 ...
- 用Python实现的数据结构与算法：双端队列
一.概述 双端队列(deque,全名double-ended queue)是一种具有队列和栈性质的线性数据结构.双端队列也拥有两端:队首(front).队尾(rear),但与队列不同的是,插入操作在两 ...
- PAT 1127 ZigZagging on a Tree[难]
1127 ZigZagging on a Tree (30 分) Suppose that all the keys in a binary tree are distinct positive in ...
- ISCC2016-BASIC、WEB、MISC简单writeup
RE和PWN题目的wp有大神已经放出来了,我也不擅长,就不搬了.bin求带. BASIC BASIC-1 50 仿射函数,百度“仿射加密法”,它讲的够清楚了. BASIC-2 50 结尾的“=”这个特 ...
- 手把手教你学node.js之学习使用外部模块
学习使用外部模块 目标 建立一个 lesson2 项目,在其中编写代码. 当在浏览器中访问 http://localhost:3000/?q=alsotang 时,输出 alsotang 的 md5 ...
- VS2010/MFC编程入门之十五（对话框：一般属性页对话框的创建及显示）
属性页对话框包括向导对话框和一般属性页对话框两类,上一节鸡啄米讲了如何创建并显示向导对话框,本节将继续介绍一般属性页对话框的创建和显示. 实际上,一般属性页对话框的创建和显示过程和向导对话框是很类似的 ...
- Java遍历包中所有类方法注解
import java.io.File; import java.io.FileFilter; import java.io.IOException; import java.lang.annotat ...
- Union、Union All、Intersect、Minus用法和区别
假设我们有一个表Student,包括以下字段与数据: [c-sharp] view plain copydrop table student; create table student ( ...
- bzoj2721 / P1445 [Violet]樱花
P1445 [Violet]樱花 显然$x,y>n$ 那么我们可以设$a=n!,y=a+t(t>0)$ 再对原式通分一下$a(a+t)+ax=x(a+t)$ $a^{2}+at+ax=ax ...
- Django使用本地css/js文件
Django使用本地css/js文件 在manager.py同层级下创建static文件夹, 里面放上css , js, images等文件或者文件夹 我的文件夹层级 然后只需在settings.py ...