[HTML5 & amp; CSS3 advanced 04] How to Use CSS3 animation in webapp, html5 download

[HTML5 & CSS3 advanced 04] How to Use CSS3 animation in webapp, html5 download
Current Situation of animation in webapp

Websites in the webapp model are pursuing an experience that is a product of the HTML5 and CSS3 wave. Aside from the experience, the webapp model has a high threshold;

Animation is an important part of experience optimization. It can be said that animation is a highlight of webapp. But it is also a pain point, mainly because mobile phone fragmentation is serious.

Due to differences in devices, models, versions, resolutions, and other factors, mobile terminals need to consider more than 10 mainstream situations, while the webview brought by Hybrid can make the situation worse.

Therefore, in the past two years, we have put forward requirements for the team's ability to use animations in a wide range on the Mobile End, or to use the webapp model. The reason is:

① One page is more sensitive to variable pollution

This variable pollution includes js variable pollution and css variable pollution. Although javascript can use AMD modules to eliminate major problems, css pollution is hard to avoid, sometimes worse than js.

Web Component is a solution, but it is not suitable for a wide range of use, because a UI change will lead to changes in various business teams. This price has no disruptive advantage and is worth the candle.

② Heap value rising

If view management does not have an effective destruction mechanism, the webapp website will inevitably consume more memory, or even reduce the experience, which is laborious and thankless.

③ Poor mobile phones, poor CPU, and poor domestic browsers. problems caused by private webkit kernel adjustment are everywhere.

Therefore, an animation can be used in webapps or mobile terminals. It is applicable to small-scale animations and In-view animations, such as layer-up animations and details animations.

It is not applicable to page-level switching, such as switching the entire view (we see the live animation in native). The pain points of view-level animation are:Mobile phone fragmentation

The difficulty of view-level animation is:

① View-level animation cannot predict the size of the dom tree, And the animation cpu of the large dom tree cannot afford it

② Scene animations cannot share windows. scollTop. Each View must maintain its own scroll bar, while area scrolling is another pain point on the Mobile End.

The above is the current situation of mobile terminals, although the technology is good, there are scenarios. Global Animation can be used on the high-end server, but the switching mechanism must be provided on the framework layer. Low-end host card frames often occur to ensure basic functions of the low-end server.

Next we will introduce CSS3 animation ......

CSS3 animation transition

The transition includes four attributes: transition-property, which specifies the css attribute to be animated. The transition-duration function is used to complete the transition. This function is generally not set, how many seconds will the transition-delay animation be delayed?

PS: Of course, the above four attributes can be written to a bunch like border

1 .demo {2   transition: border 2s ease 2s;3 }

This code tells the browser to trigger every time the border changes, and complete the process within two seconds.

Here is a typical small example:

1 <! Doctype html> 2 Simple animations use transition, so complicated animations use animation. Or, if you need to transition from one state to another, you 'd better use animation.

Animationanimation-name for the keyframe name animation-duration animation time spent animation-timing-function animation curve animation-delay how many milliseconds a execution of animation-iteration-count execution of animation-direction whether to reverse direction play

We generally use the first four parameters. Here, we need to create a keyframe rule first. Here is a simple example:

1 
After the animation logic is executed each time, you need to remove the class to achieve the reset effect. The animationEnd is the corresponding callback, and the corresponding transition also has a transitionEnd callback that will be triggered after the animation. If it does not work occasionally, you can use setTimeout.
Here is an example that is more suitable for projects:
1 This is the classic effect of a list page. If you do a good job, it will make people shine. Of course, if you do not do a good job, it will also cause headaches. Here, we will loop through the code for the effect. Here is a knowledge point to explain:

The browser's dom operations are mutually exclusive with page rendering
Take the Code as an example:
1     $.each(items, function (i) {2       var el = $(this);3       el.css('-webkit-animation-delay', i * 50   + 'ms');4       el.addClass('animateItem');5     })
In fact, each loop synchronizes the class and css attributes to the dom, but does not execute the animation. Instead, the whole dom operation is executed only after the execution is completed. If the code is added to the time slice, it will be different.
In this case, a loop will be executed immediately, and then the setTimeout code will be executed one by one. You can also see that the time sequence between setTimeout is not guaranteed well. For example, there are 100 items in item
1 function animatFn() {2   $.each(items, function (i) {3     setTimeout($.proxy(function () {4       var el = $(this);5       el.addClass('animateItem');6     }, this), 300 * i);7   })8 }
More complex effects, such as simulating the qq page transfer animation, should be played with professional reconstruction colleagues, you can look at this Code:
Https://github.com/yexiaochai/cssui/tree/gh-pages

Demo address: http://yexiaochai.github.io/cssui/demo/debug.html#a
Conclusion
If you are a beginner in refactoring, please leave a message