Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to understand CSS3's loading animation loading related transition optimization", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to understand CSS3's loading animation loading related transition optimization"!

First, chrysanthemum

Nowadays, with the continuous development of web technology, views and data rendering are more presented by the front end, while the background deals more with data. As a result, we often see such interaction scenarios. When the page loads, you see a chrysanthemum turning in a box, and then the content is rendered, or click a button, the chrysanthemum is turning, and then the list is dynamically loaded and rendered. For example:

Is there nothing wrong with it? Indeed, functionally OK, there are chrysanthemums, users are also willing to wait. However, do you feel that all interactions, the emergence of chrysanthemum → content, are "bang bang" very stiff feeling, especially when the content is dynamic and highly uncertain. When we use some better mobile phone APP (such as Wechat), we certainly will not have this feeling, the whole interaction process is very smooth, like the spring of a mountain stream, trickling to the foot of the mountain, rather than the feeling of the giant walking in the canyon.

Therefore, if the presentation of chrysanthemum to the display of content can be presented through natural animation, it is bound to enhance the user experience.

The key factor for the main change of dynamic content presentation is height, and the best tool for transition effect is CSS3 transition. Therefore, the brain can not help but wonder whether it is possible to use CSS3 transition to achieve a high degree of animation of dynamic content and gradually enhance the user experience.

In fact, as early as 12 years ago, I started to try this. If you are interested, you can check out this article: "more | gradually use transition animation in the interaction." I looked at it myself and found that my ability to talk nonsense at that time had dumped my two Changan streets now. Just look at it directly from Part5. Among them, limited by the slightly immature technology at that time, the method of obtaining the height of the container was silly, so we pretended not to see it.

II. The difficulties of CSS3 transition

If you can animate dynamic rendering with a single line of CSS code, you don't need this article, and sites are already interacting with this kind of high-quality experience. The root of it is a limitation of CSS3 transition, indifference to "auto" *! What do you mean?

It is easy for everyone to understand that the so-called "transition" is from one place to another, for example, from 0 to 100. But it's silly of you to go from 0 to auto. When I was in college, I saw an American sci-fi film teleporter, in which the hero did not want to move instantly, but also needed to know the destination and path.

However, when we present dynamic content in a div, because we don't know what's in it (they all say it's dynamic), our height is actually auto, so even if transition: height .35s starts, there will be no animation, what we need is a fixed value.

So the difficulties and key points come, how to give a fixed height value?

Third, fixed height value and transition trigger

To put it bluntly, the current height fixed value, get the dynamic content loaded height fixed value, then style setting, over~

I will not talk about the details of the code, in fact, no one cares, "what I need is code, code!" I guess that's how a lot of people roar.

The code is as follows:

/ / highly seamless animation method

Var funTransitionHeight = function (element, time) {/ / time, numeric value, but default

If (typeof window.getComputedStyle = = "undefined") return

Var height = window.getComputedStyle (element) .height

Element.style.height = "auto"

Var targetHeight = window.getComputedStyle (element) .height

Element.style.height = height

Element.offsetWidth = element.offsetWidth

If (time) element.style.transition = "height" + time + "ms"

Element.style.height = targetHeight

}

Ten lines of the first point code.

Element is the container element; if you write transition in CSS, the time parameter can be left out, for example:

The code is as follows:

Element {transition: height 250ms; overflow: hidden;}

FunTransitionHeight (element)

If you don't like the name funTransitionHeight, you can change it yourself. IE9+ is effective, IE10+ is animated, and IE6~IE8 is the same as ever, so-called progressive enhancement.

It is better to hear than to see, you can click here: variable highly dynamic element height CSS3 transition transition demo

Click the "Click me" button on the page, and there will be highly irregular content presentation. You can see that the content presentation is not banging, but "banging".

How do I call it? Quite simply, funTransitionHeight () at initialization, assigning a fixed value; then every time the chrysanthemum is finished and the content is loaded, click on funTransitionHeight (), and the animation comes. In other words, compared to your previous JS code, there is only one more line of funTransitionHeight (element) calls, is it practical and low-cost!

Thank you for your reading, the above is "how to understand CSS3 loading animation loading related transition optimization" content, after the study of this article, I believe you on how to understand CSS3 loading animation loading related transition optimization this problem has a deeper understanding, the specific use of the need for you to practice verification. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.