Summary of using javascript and css3 animation together_javascript skills

When Html5 and CSS3 have gradually become mainstream, I am still very accustomed to using js to make some simple animations. Because on desktop browsers, not all support css3. Users are also very strange. Not every user can develop user habits. There are always many people who feel that win7.win8 is not as useful as xp. But the mobile phone aspect is very different. The mobile browser’s support for HTML5 and CSS3 is still very good. However, the processing capabilities of mobile phone hardware are very limited. Today, when quad-core and eight-core mobile phones are rampant, there are still people like me who use dual-core or single-core mobile phones. Although js is good, I don’t have much exposure to it, so I can’t adjust the feeling well. A simple page slide runs very smoothly on an i7 PC, but on my dual-core phone, it freezes, freezes, freezes, and freezes. Very depressing. For this reason, I have been looking for it for a long time and read a lot. Finally, not long ago, I found a relatively simple method: use css3 to perform animation.

In the past, in addition to Jquery’s animate and other animation functions, more people used setTimeout and setInterval to cyclically change the margin, width, top and other attributes of an element. It is precisely because of this that I am confused.

First of all, setTimeout and setInterval are not executed continuously if you set them to 0ms. I accidentally discovered this secret while debugging in iscroll. It turns out that the calculation of Timer delay relies on the browser's built-in clock, and the accuracy of the clock depends on the frequency of clock updates. The update interval for IE8 and previous IE versions is 15.6 milliseconds. It's over, I want it to perform 1px displacement in 10ms, but it can't do it on time.

And what happened to the card? Stuck because the code is not written well. After all, js is single-threaded. Once there are time-consuming actions, the UI may not respond. Although we use setTimeout, it is precisely because of setTimeout that the interface seems to be unstable but not smooth. Because after the execution of setTimeout this time, another time-consuming action is likely to be encountered in the interval before the next execution, then the execution of setTimeout will be delayed indefinitely. Then what? Card! However, the next reason for the card is to accidentally trigger the browser Layout (ie: relayout) when changing the original attribute. This problem is said to be time-consuming, but it is time-consuming. It is said to be time-consuming, but in many cases it can be ignored. But many times it cannot be ignored.

In addition to the above two paragraphs, there is another problem, that is, on many mobile phones, it always feels like one frame after another, and one frame may be longer and the other shorter. This is really a rhythm that can make people cripple. Why is this happening? It still has something to do with the delay of settimeout. Dropped frames. This problem involves the refresh frequency of the monitor. It's just too complicated.

In the end, I chose CSS3, js dynamically changes the attributes of elements, and uses transition to control the animation execution time. For example:

Copy code The code is as follows:

js:

Copy code The code is as follows:

$("#test").width(200);

In this way, the width of this div will become 200px after 1 second. It’s not like Sun Wukong transformed into a peach and suddenly grew bigger, he slowly moved forward without getting stuck. And there is an advantage to using css animation, it is not affected by time-consuming js. Although the UI thread and the js thread in the browser are mutually exclusive, this does not hold true for css animation, and many browsers can also enable hardware acceleration (such as Chrome). Although browser relayout is usually not very obvious, you should try to avoid large-scale relayout. So add -webkit-transform: translateZ(0); or -webkit-transform: translate3d(0,0,0); to the animated element so that the browser will render this layer independently. Even if re-layout is unavoidable, the area will be smaller this way. Using translate instead of margin is indeed a very wise decision.

Finally, here are some commonly used properties that will trigger relayout when changes occur:
​

Copy code The code is as follows:

width
height
​Padding
margin
​display
​border-width
border
​min-height

The above is all the content described in this article. I hope it will be helpful to everyone in learning javascript and CSS3. At the same time, please add any deficiencies. Thank you for your understanding.