CSS3 transition optimize Web content after loading height changes

Now that Web technology is evolving, views and data rendering are rendered more by the front end and more with data in the background. As a result, we often see such interactive scenes. Page load, see a box inside there is a daisy in the turn, and then the content rendering, or click on a button, chrysanthemum in the turn, and then the list dynamically loaded rendering. For example:



Isn't there any problem? Indeed, the function of OK, there are chrysanthemums, users are willing to wait. However, we do not feel that all interaction, the occurrence of chrysanthemum → content, are "bang bang" very blunt feeling, especially when the content is dynamic, highly uncertain time. We use some of the better mobile phone app (such as micro-mail) when there will be no such feeling, the entire interactive process is very smooth, like a mountain stream spring, a trickle to the foot of the mountain, rather than the giant in the canyon walk feeling.

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

and the dynamic content presents the main change key factor is--the altitude, but the transition effect best weapon is CSS3 transition, therefore, the brain can not help but question, is not may use the CSS3 transition to realize the dynamic content the highly animated rendering, enhances the user experience gradually.

In fact, as early as 12, I began to try this, if interested can view this article: "more | The gradual use of transition animation in the close interaction." I also looked at it, I found that the ability to talk nonsense I dumped the present two Chang ' an street. Just look at it from the Part5. Among them, limited by that year slightly immature technique, inside obtains the container height the method, some silly, everybody pretends not to see.

the difficulty of CSS3 transition

If the direct line of CSS code can let dynamic rendering animation, it does not need this article, the site has long been the interaction of such quality experience. The fundamental is CSS3 transition a limitation of the "Auto" * cold! What do you mean?

It is well understood that the so-called "transition" is from one place to another, for example, from 0 to 100. But, you come from 0 to auto, dumbfounded. University saw an American science fiction film "Psychic Transmitter", in which the male is not want to instantaneous displacement of instantaneous displacement, but also need to know the destination and path.

However, when we are in a div rendering dynamic content, because we do not know the contents of the inside (are said to be dynamic well), so, our height is actually auto, so, even if Transition:height 35s walk, also will not have animation effect, What we need is a fixed value.

So the difficulty and the key point come, how to give fixed height value?

fixed height value and transition trigger

Plainly simple, the current height of fixed values, get dynamic content loaded after the height of fixed values, and then style settings, over~

Code details I will not say, in fact, no one is concerned about, "I need code, code!" "I'm guessing a lot of people are so growling.

code is as follows

copy code

//highly seamless animation method var funtransitionheight = function (element, time) {/time, numeric value, can be 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; };

10 lines of code.

An element is a container; if transition you are writing in CSS, the time parameter can be done without, for example:

The code is as follows	Copy Code
element {transition:height 250ms; overflow:hidden;} Funtransitionheight (Element)

Funtransitionheight name if you don't like it, you can get rid of it yourself. ie9+ effective, ie10+ has animation, ie6~ie8 the old appearance, the so-called progressive enhancement.


Click on the "Click Me" button on the page, there is a high level of content rendering, you can see the content is not a bang bang, but? _?_?_~

How do I call it? Very simple, initialization time funtransitionheight (), assign a fixed value, and then each Chrysanthemum finished, content loaded in Funtransitionheight (), the animation came. In other words, compared to your previous JS code, more than one line of funtransitionheight (element) calls, is not practical and low-cost!