Recently, while trying to develop a management system using Vue3 + Vuex4 + Ant Design2, I stumbled upon a lightweight script library: velvelocity. Js while implementing the animation effect of route switching.

Introduction to the

Velocity is an easy-to-use, high-performance, feature-rich, lightweight JS animation library. Works well with jQuery and has the same API as $.animate(). It can be used independently of jQuery.

Not only does Velocity incorporate all of $.animate(), it also features color animation, transforms, loops, easing, SVG animation, and rolling animation.

$.animate() is faster, smoother, and performs even better than CSS3 animation. It is the best combination of jQuery and CSS3 Transition. It supports all modern browsers, with minimum compatibility to IE8 and Android 2.3.

Velocity is currently being used by thousands of companies in their projects, including WhatsApp, Tumblr, Windows, Samsung, Uber, and more. Here Libscore.com takes a look at which sites are using Velocity.

fragment

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 };
Copy the code

The entrance

Need to experience can go to the official download, and view the document.

Official website: velocityjs.org/

Github:github.com/julianshapi…