Javascript and css3 animation used in combination with summary_javascript skills

This article describes how to use javascript and CSS animation to achieve animation effects that consume less resources and are more optimized. The idea is very clever. We recommend this article for your reference. When Html5 and css3 gradually become mainstream, I am still very accustomed to using js to do some simple animations. Not all desktop browsers support css3. Users are also very strange. Not every user can be trained. Some people may think that win7.win8 is not good for xp. But the mobile phone is quite different. The mobile browser supports html5 and css3 very well. However, mobile phone hardware processing capabilities are very limited. Today, quad-core and eight-core mobile phones still use dual-core or single-core mobile phones like me. Although js is good, it does not have much contact with each other. A simple page slides and runs smoothly on the i7 pc. However, on my dual-core mobile phone, there are cards, twines, cards, and twines. Very depressing. For this reason, I have been searching for a long time and reading a lot. Finally, I found a simple method: Use css3 to execute the animation.

In the past, except for animation functions such as Jquery's animate, setTimeout and setInterval were used for animation. In this way, attributes such as margin, width, and top of an element were changed cyclically. That is why I am confused.

First, setTimeout and setInterval are not always executed if you set 0 ms. This secret was accidentally discovered during iscroll debugging. The original Timer latency calculation relies on the browser's built-in clock, and the accuracy of the clock depends on the clock update frequency. The update interval of IE8 and earlier IE versions is 15.6 milliseconds. I think it will execute 1 px shift within 10 ms, and it cannot do it on time.

What is the problem with the card? Card, because the code is not well written. After all, js is single-threaded, And the UI may not respond to any time-consuming actions. Although we use setTimeout, it is precisely because setTimeout makes it seem that the interface is not dead but not smooth. Because after this setTimeout execution and before the next execution, another time-consuming action may be encountered during this interval, the execution of setTimeout will be extended infinitely. What then? Card! However, there is another reason for the card to accidentally trigger the browser Layout (I .e. re-Layout) when changing the original attributes ). This problem is not time-consuming, but time-consuming. It can be ignored in many cases. However, in many cases, it cannot be ignored.

In addition to the above two sections, there is another problem: many mobile phones always feel like one frame at a time, and it may also be a frame with a length and a short frame. This is really a waste of people. Why is this still related to the delay of settimeout. Frame drop. This problem involves the refresh frequency of the monitor. It's too complicated.

Finally, CSS 3 is selected. js dynamically modifies the attributes of elements and uses transition to control the animation execution time. For example:

The Code is as follows:

Js:

The Code is as follows:

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

In this way, the p width will change to Px after 1 second. Sun Wukong is not the same as changing peaches. He gradually becomes bigger and keeps catching up. In addition, css animation is good because it is not affected by time-consuming JavaScript. Although the UI thread and js thread in the browser are mutually exclusive, this is not true for css animation, and many browsers can also enable hardware acceleration (such as Chrome ). Although the re-layout of browsers is not obvious in general cases, we should try to avoid the re-layout of a large area. So add-webkit-transform: translateZ (0); or-webkit-transform: translate3d (, 0) to the animation element, so the browser will render this layer independently. Even if the layout is heavy, the area is smaller. Replacing margin with translate is indeed a wise decision.

Finally, some commonly used attributes that trigger the re-layout when changing are attached:
　　

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 for you to learn javascript and CSS3. If you have any shortcomings, please add them and understand them.