Abandon the use of jQuery animation

Intermediary trading http://www.aliyun.com/zixun/aggregation/6858.html"> SEO diagnostic Taobao customer hosting technology hall

In the Web development community, developers often think that CSS animation is a high-performance web animation technology that should be purely animated with CSS if it wants to load pages faster. In fact, this view is wrong, many developers have long given up the javascript animation, forcing yourself to use complex CSS styles to achieve the same effect of UI interaction. They completely ignore the better interactivity that javascript brings.

But the fact is that javascript-based animations are usually as fast as css-based animations, and some are even faster. CSS animations are often found to be quicker because we always get them in jQuery's $ .animate () rather than jQuery animation, whereas javascript's animations library avoids DOM manipulation, which is often about 20 times faster than jQuery.

So, let's smash that rumor together and write some real-world examples to evaluate the performance of javascript animations.

Why use JavaScript?

CSS is handy when converting attributes into styles, and they also provide excellent performance without using other libraries. But when you use CSS to implement complex designs, they become cumbersome.

All in all, CSS will limit your design. But if you use javascript, you can logically solve these problems. javascript animation engine provides the following features:

Cross-browser SVG support

Physics-based animation loading

Timeline control,

Bezier translations

Tip: If you're more interested in the presentation of javascript, read Julian Shapiro's "CSS vs. JS Animation: Which Is Faster?" And Jack Doyle's "Myth Busting: CSS Animations vs. JavaScript." If you want to see some demos, take a look at the performance pane and the Library Speed ​​Comparison.

Velocity and GSAP

The two most commonly used javascript animation libraries are Velocity.js and GSAP. These libraries have no performance penalty when using jQuery because none of them use jQuery's animation stack.

If you have to use jQuery on the page, you can replace your jQuery $ .animate () with Velocity and GSAP. such as

$ element.animate ({opacity: 0.5});

Can be written as:

$ element.velocity ({opacity: 0.5}).

Of course, these two libraries can also be used without jQuery:

/ * Working without jQuery * /

Velocity (element, {opacity: 0.5}, 1000); // Velocity

TweenMax.to (element, 1, {opacity: 0.5}); // GSAP

Like the example above, which is all without jQuery, Velocity also retains a syntax similar to jQuery's $ .animate ().

In contrast, GSAP makes it easier to call static methods through object-oriented design. You can have full control of the animation.

You do not use jQuery object elements in either of these solutions, but what if you wanted to manipulate the original DOM node? You can

document.getElementByID

document.getElementsByTagName

document.getElementsByClassName

document.querySelectorAll

These are similar to the implementation of jQuery's selector. Below we will be a brief introduction of these methods.

Put an end to jQuery

Tip: If you need to know $ .animate () for jQuery, check out Velocity's documentation.

Let's take a look at the features of querySelectorAll ::

document.querySelectorAll ("body"); // Get the body element

document.querySelectorAll (". squares"); // Get all elements with the "square" class

document.querySelectorAll ("div"); // Get all divs

document.querySelectorAll ("# main"); // Get the element with an id of "main"

document.querySelectorAll ("# main div"); // Get the divs contained by "main"

As with the code, you can easily make a selection of CSS via querySelectorAll. It will return all matching elements in the array:

/ * Get all div elements. * /

var divs = document.querySelectorAll ("div");

/ * Animate all divs at once. * /

Velocity (divs, {opacity: 0.5}, 1000); // Velocity

TweenMax.to (divs, 1, {opacity: 0.5}); // GSAP

Because we do not use the object elements of jQuery, you may wonder how we should link the animation, in fact, we can do so:

$ element // jQuery element object

.velocity ({opacity: 0.5}, 1000)

.velocity ({opacity: 1}, 1000);

In Velocity, you can simplify your code like this:

/ * These animations automatically chain onto one another. * /

Velocity (element, {opacity: 0.5}, 1000);

Velocity (element, {opacity: 1}, 1000);

There's no performance penalty for dealing with the animation in this way. You will find it's javascript performance and CSS almost the same, and the operation more convenient.

Geek Tags - professional and accurate sharing, focus on the geeks you are interested in, the community offers great boutique tutorial, interactive teaching

For front-end technology, visit the geek interactive course library and codecasting

The original from: Abandon the use of jQuery animation