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的使用 概述 ...
随机推荐
- Docker(三)-Docker中Image、Container与Volume的迁移
Image 镜像的迁移,适用于离线环境. 一般离线环境,都会自建Docker Registry. 无论 官方的 ,还是最近流行的 Harbor ,都是不错的选择. 但是,这个世界上就是有些环境,或者说 ...
- C# 登录窗口的设计技巧
记得很久之前要用C#做个需要登录的小东西,自己之前完全没有编写WinForm的经验,整个过程中,自己感觉应该怎么写就怎么写,时常导致许多逻辑性的错误,比如在做这个登录窗口的时候,应该实现的效果是,用户 ...
- 重启Hbase命令
注意先启动hadoop,记得重启zookeeper. 具体操作如下: cd hadoop-2.7.4/sbin/ && ./stop-all.sh && ./start ...
- 洛谷P13445 [USACO5.4]奶牛的电信Telecowmunication(网络流)
题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,...,a(c),且a1与a2相 ...
- oracle11g的安装
1. 解压缩已经下载好的文件,两个文件一起解压,如图所示 2. 到解压路径当中找到setup.exe文件 3.安装的第一步,配置安全更新,如果不希望接收安全更新邮件可以选择将下方的复选框勾选去除 4. ...
- pgm3
这部分主要讨论了一些概念性的东西.一个是常用的 local probabilistic models,一个是如何用 template-based representation. 这部分主要是一些概念, ...
- nginx mp3
location /mp3 { alias "d:/mp3"; default_type audio/mpeg; autoindex on; }
- MT【165】分段函数
(2018浙江省赛12题改编)设$a\in R$,且对任意的实数$b$均有$\max\limits_{x\in[0,1]}|x^2+ax+b|\ge\dfrac{1}{4}$求$a$ 的范围. 提示: ...
- 解题:HNOI 2013 Cards
题面 除了不洗牌以外,每种洗牌方式的每个循环里的颜色必须一样,然后大力背包一下就好了.最后记得把不洗牌的方案也算进去 #include<cstdio> #include<cstrin ...
- 神奇:java中float,double,int的值比较运算
float x = 302.01f; System.out.println(x == 302.01); //false System.out.println(x == 302.01f); // ...