写点什么

Velocity.js:一个简单易用、高性能、功能丰富的轻量级 JS 动画库

作者:devpoint
  • 2021 年 12 月 25 日
  • 本文字数:558 字

    阅读完需:约 2 分钟

Velocity.js:一个简单易用、高性能、功能丰富的轻量级JS动画库

最近在尝试使用 Vue3 + Vuex4 + Ant Design2 开发一个管理系统,在实现路由切换动画效果时候,无意发现一个轻量级脚本库:Velocity.js

简介

Velocity 是一个简单易用、高性能、功能丰富的轻量级 JS 动画库。能与 jQuery 完美配合,并和 $.animate() 有相同的 API, 它可以不依赖 jQuery,可单独使用。


Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和滚动动画等特色功能。


体验上 $.animate() 更快更流畅,性能甚至高于CSS3 animation, 是 jQuery 和 CSS3 transition 的最佳组合,它支持所有现代浏览器,最低可兼容到 IE8 和 Android 2.3。


Velocity 目前已被数以千计的公司使用在自己的项目中,包括WhatsAppTumblrWindows、Samsung,、Uber 等,这里Libscore.com 统计了哪些站点正使用 velocity.js

片段

import Velocity from "velocity-animate";
const enter = (el, done) => { Velocity(el, "slideDown", { duration: 300 }, { complete: done });};
const leave = (el, done) => { Velocity(el, "slideUp", { duration: 300 }, { complete: done });};
export { enter, leave };
复制代码

入口

需要体验可以去官方下载,并查看文档。


官方网址:http://velocityjs.org/


Github:https://github.com/julianshapiro/velocity

发布于: 1 小时前
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
Velocity.js:一个简单易用、高性能、功能丰富的轻量级JS动画库