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

This article "CSS how to achieve the list pull effect in the page" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "CSS how to achieve the list pull effect in the page" article.

You may often see the following effects:

Yes, it is the common form of "unfold and fold" interaction on the page, which is usually done by controlling the value of the display attribute to switch between none and other values, but although the function can be achieved, the effect is very stiff, so there is a need for elements to be highly slippery when they are expanded and folded.

Previous implementations can use jQuery's slideUp () / slideDown () method, but on the mobile side, because CSS3 animation is well supported, the JavaScript framework on the mobile side does not provide animation modules. It's natural to think of CSS3 technology.

The author's first reaction is to implement it in height+overflow:hidden;, which has no performance problems and no need to worry about display problems. But it occurred to me in a twinkling of an eye: most of the time, the content we need to present is dynamic, that is, the height of the content is not fixed (of course, you can also use overflow-y:auto; for the time being). To achieve this effect, height needs to use "non-fixed value auto"!

But auto is not a numeric value, but a keyword, so there is no transition or animation if we use height to switch between 0px and auto under an implicit stipulation that numeric values and keywords cannot be calculated.

The same goes for the clip-path attribute in css: many beginners are used to animating between none and specific values, which is impossible.

Therefore, to achieve the effect of the beginning of the article, the author recommends the max-height attribute:

Listing 1

Content 1

Content 2

Content 3

Content 4

Listing 2

Content 1

Content 2

Content 3

Content 4

Listing 3

Content 1

Content 2

Content 3

Content 4

.accordion {width: 300px;} .accordion article {cursor: pointer;} label {display: block; padding: 020px; height: 40px; background-color: # f66; cursor: pointer; line-height: 40px; font-size: 16px; color: # fff;} p {overflow: hidden; padding: 020px; margin: 0 Border: 1px solid # f66; border-top: none; border-bottom-width: 0; max-height: 0; line-height: 30px; transition: all .5s ease } input:nth-child (1): checked ~ article:nth-of-type (1) pcentinputGann article:nth-of-type child (2): checked ~ article:nth-of-type (2) pGramage inputPartition nthlychild (3): checked ~ article:nth-of-type (3) p {border-bottom-width: 1px; max-height: 130px;}

In css, the scene that min-height/max-height appears must be in an adaptive layout or a fluid layout. For the expanded max-height value, we just need to make sure that the setting value is larger than the content height-- because when max-height > height, the element height is calculated at the height of the height attribute.

However, it is recommended not to set the max-height value too high. after all, the time of transition or animation is "time to complete animation" rather than "time to display content".

The pull-back effect has another form of presentation:

It is characterized by hovering the mouse over a part of the component, which expands and squeezes the next part, returning to its original state when the mouse leaves. If the mouse is quickly skipped over it, it will have the effect of playing the accordion.

To use JS to achieve accordion effects, you must listen for mouseenter and mouseleave mouse events, while: hover in CSS can replace both effects. So the key to pure CSS to achieve accordion effect is: hover, its core code is as follows:

Li {} li:hover {}

For layouts, flex is a better way for elements arranged in a row with the same / different widths to expand and contract in a row.

.accordion {display: flex; width: 600px; height: 200px;} li {flex: 1; cursor: pointer; transition: all 300ms;} li:nth-child (1) {background-color: # f66;} li:nth-child (2) {background-color: # 66f;} li:nth-child (3) {background-color: # f90 } li:nth-child (4) {background-color: # 09f;} li:nth-child (5) {background-color: # 9c3;} li:nth-child (6) {background-color: # 3c9;} li:hover {flex: 2; background-color: # ccc;}

There is one thing to note here: in some "special" cases such as the delay of animation, you can insert CSS custom variables into HTML in the form of inline style.

The above is about "CSS how to achieve the list pull effect in the page" this article content, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content, please pay attention to 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.