Seven ways to summarize front-end animations (with code)

This article brings the content is about can realize front-end animation of seven ways to summarize (with code), there is a certain reference value, the need for friends can refer to, I hope you have some help.

1, JavaScript directly implemented

The main idea is to use the callback function of the SetInterval or SetTimeout method to continually invoke CSS styles that change an element to achieve the effect of changing the style of the element.

<div id= "rect" ></div>     <script> let         elem = document.getElementById (' rect ');         Let left = 0;         Let timer = setinterval (function () {             if (left<window.innerwidth-200) {                 elem.style.marginLeft = left+ ' px ';                 Left + +;             } else {                 clearinterval (timer);             }         },16); </script>

Cons:JavaScript Implementation animations often cause page reflow to redraw, consume performance, and generally should be in a desktop browser. Use on the mobile side will have a noticeable lag.

2, SVG (Scalable vector graphics);

3, CSS3 transition;

4, CSS3 animation;

5, canvas animation;

6, Requestanimationframe;

Requestanimationframe is another web API, similar in principle to settimeout and setinterval, and is used to trigger animation actions using JavaScript's continuous loop method. But Requestanimationframe is a browser-optimized API for animations that are better performing than the others.

    <div id= "rect" ></div>  <script type= "Text/javascript" > Window.requestanimationframe = window.requestanimationframe| | window.mozrequestanimationframe| | window.webkitrequestanimationframe| | Window.msrequestanimationframe;     Let Elem = document.getElementById ("rect");     Let left = 0;     Automatic execution of persistent callback     Requestanimationframe (step);     Continue the Change element position     function step () {         if (left<window.innerwidth-200) {             left+=1;             Elem.style.marginLeft = left+ "px";             Requestanimationframe (step);         }     } </script>

7. JQ Animation

1) Show Hidden:

. Show (ms). Hide (ms). Toggle (ms) with no parameters when the default instant display is hidden, without animation, principle: Display property implementation, with the number of milliseconds parameter: There will be animation effect.

Toggle Show hidden elements and hide displayed elements

2) Slide slide:. Slideup (ms). Slidedown (ms). Slidetoggle (MS)

3) Fade in:. FadeIn (ms). FadeOut (ms). Fadetoggle (MS)

2. Universal Animation:

$ (...). Animate (Params,speed,callback)

Params: A mapping that contains style attributes and values

Speed: Velocity parameters [optional]

Callback: function executed when the animation is complete [optional], this in the callback function, refers to the current DOM element that is playing the animation

8. Summary

Desktop browsers recommend the use of JavaScript directly to implement animation or SVG way;

Mobile can consider using css3transition, css3animation, canvas, or Requestanimationframe methods