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

Most people do not understand the knowledge points of this "CSS3 transition optimization case analysis" article, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "CSS3 transition optimization case analysis" article.

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.

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?

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 ~

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!

The above is about the content of this article on "transition optimization case analysis of CSS3". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.