最近在尝试使用 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 目前已被数以千计的公司使用在自己的项目中,包括WhatsApp、 Tumblr、 Windows、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 };
入口
需要体验可以去官方下载,并查看文档。
官方网址:velocityjs.org/
Github:github.com/julianshapi…