vue里面使用Velocity.js
https://github.com/julianshapiro/velocity
中文手册(教程):http://www.mrfront.com/docs/velocity.js/
velocity.js 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
它比 $.animate() 更快更流畅,性能甚至高于 CSS3 animation, 是 jQuery 和 CSS3 transition 的最佳组合,它支持所有现代浏览器,最低可兼容到 IE8 和 Android 2.3。
Velocity 目前已被数以千计的公司使用在自己的项目中,包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等,这里Libscore.com 统计了哪些站点正使用 velocity.js。
Vue中如何使用:
安装 npm install velocity-animate@beta
页面引入: import Velocity from 'velocity-animate'
使用:
<template>
<!--使用Velocity实现动画-->
<div class="donghuagouzi">
<transition
name="fade"
@before-enter="handleVeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
</template> <script>
import Velocity from 'velocity-animate' export default {
name: 'donghuagouzi',
data () {
return {
show: true
}
},
methods: {
handleClick: () => {
this.show = !this.show
},
handleVeforeEnter: (el) => {
el.style.opacity =
},
handleEnter: (el, done) => {
Velocity(el, {
opacity:
}, {
duration: ,
complete: done
})
},
handleAfterEnter: () => {
console.log('动画结束')
}
}
}
</script> <style lang="stylus" rel="stylesheet/stylus" scoped> </style>
vue里面使用Velocity.js的更多相关文章
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
- vue中的js动画与Velocity.js结合
vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...
- Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...
- 界面优化--如何提升用户体验(Velocity.js和GSAP)
Velocity.js和GSAP 我们需要提升代码质量来留住用户.作为用户界面的建设者,我们的工作是迅速引导和引导用户的注意力,指导他们如何有效地使用我们的应用程序. 1. 如何提升代码质量 定向聚焦 ...
- velocity.js用法整理1
velocity.js 此框架相对于JQ的运动算法, 有很大的优势. 例如,A和B两个元素,position:absolute; top:0; 现在让A元素用JQ的animate,B用velocit ...
- JQuery动画插件Velocity.js发布:更快的动画切换速度
5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...
- Velocity.js发布:更快的动画切换速度
Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...
- javascript动画:velocity.js学习
第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...
- Velocity.js的使用
前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...
随机推荐
- 使用phantomjs进行无界面UI自动化测试
PhantomJS(http://phantomjs.org/) 是一个基于WebKit的服务器端JavaScript API.它全面支持web而不需浏览器支持,其快速.原生支持各种Web标准:DOM ...
- Mac OS X使用简介
一.OS X 版本以大型猫科动物命名 10.0 猎豹(Cheetah) 10.1 美洲狮(Puma) 10.2 美洲虎(Jaguar) 10.3 黑豹(Panther) 10.4 ...
- js css样式操作代码(批量操作)
js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09 用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率. ...
- golang 实现线程池
package main import ( "fmt" "time" ) type Pool struct { Queue chan func() error; ...
- C# 项目迁移 Microsoft.VisualStudio.Tools.Office.BuildTasks 生成解决方法报错:请确认 <UsingTask> 声明正确,该程序集及其所有依赖项都可用
问题定位: 1.在Server2003上使用vs2010开发的项目,移到Win8上,同样使用vs2010打开.在生成解决方案的时候有如下报错: 未能从程序集 Microsoft.VisualStudi ...
- c++中冒号(:)和双冒号(::)的用法
1.冒号(:)的用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned char c; } ; ...
- idea中 mybatis的debug文件需要放在src的目录下 不能加多余的路径
- [代码]--给GridControl中的某列添加图片
要让GridControl的某列显示图片只需要数据源中有图片就可以正确显示 1.给DataSet添加一列,格式为image ds.Tables[].Columns.Add("SIGN&quo ...
- Java IO 类一览表
下表列出了大多数(非全部)按输/输出,基于字节或字符划分的 Java IO 类.
- python数据分析scipy和matplotlib(三)
Scipy 在numpy基础上增加了众多的数学.科学及工程常用的库函数: 线性代数.常微分方程求解.信号处理.图像处理.稀疏矩阵等: Matplotlib 用于创建出版质量图表的绘图工具库: 目的是为 ...