英文文档:http://velocityjs.org/

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的更多相关文章

  1. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  2. vue中的js动画与Velocity.js结合

    vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...

  3. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  4. 界面优化--如何提升用户体验(Velocity.js和GSAP)

    Velocity.js和GSAP 我们需要提升代码质量来留住用户.作为用户界面的建设者,我们的工作是迅速引导和引导用户的注意力,指导他们如何有效地使用我们的应用程序. 1. 如何提升代码质量 定向聚焦 ...

  5. velocity.js用法整理1

    velocity.js 此框架相对于JQ的运动算法, 有很大的优势. 例如,A和B两个元素,position:absolute;  top:0; 现在让A元素用JQ的animate,B用velocit ...

  6. JQuery动画插件Velocity.js发布:更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  7. Velocity.js发布:更快的动画切换速度

    Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...

  8. javascript动画:velocity.js学习

    第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...

  9. Velocity.js的使用

    前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...

随机推荐

  1. 使用phantomjs进行无界面UI自动化测试

    PhantomJS(http://phantomjs.org/) 是一个基于WebKit的服务器端JavaScript API.它全面支持web而不需浏览器支持,其快速.原生支持各种Web标准:DOM ...

  2. Mac OS X使用简介

    一.OS X 版本以大型猫科动物命名 10.0   猎豹(Cheetah) 10.1   美洲狮(Puma) 10.2   美洲虎(Jaguar) 10.3   黑豹(Panther) 10.4   ...

  3. js css样式操作代码(批量操作)

    js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09   用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率.   ...

  4. golang 实现线程池

    package main import ( "fmt" "time" ) type Pool struct { Queue chan func() error; ...

  5. C# 项目迁移 Microsoft.VisualStudio.Tools.Office.BuildTasks 生成解决方法报错:请确认 <UsingTask> 声明正确,该程序集及其所有依赖项都可用

    问题定位: 1.在Server2003上使用vs2010开发的项目,移到Win8上,同样使用vs2010打开.在生成解决方案的时候有如下报错: 未能从程序集 Microsoft.VisualStudi ...

  6. c++中冒号(:)和双冒号(::)的用法

    1.冒号(:)的用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned char c; } ; ...

  7. idea中 mybatis的debug文件需要放在src的目录下 不能加多余的路径

  8. [代码]--给GridControl中的某列添加图片

    要让GridControl的某列显示图片只需要数据源中有图片就可以正确显示 1.给DataSet添加一列,格式为image ds.Tables[].Columns.Add("SIGN&quo ...

  9. Java IO 类一览表

    下表列出了大多数(非全部)按输/输出,基于字节或字符划分的 Java IO 类.

  10. python数据分析scipy和matplotlib(三)

    Scipy 在numpy基础上增加了众多的数学.科学及工程常用的库函数: 线性代数.常微分方程求解.信号处理.图像处理.稀疏矩阵等: Matplotlib 用于创建出版质量图表的绘图工具库: 目的是为 ...