You may often see the following effects:
Yes, it is the commonly used "expand and retract" interactive form on the page. The usual way is to control the display attribute value to switch between none and other values, but although the function can be realized, the effect is very rigid, so there will be such a One requirement-I hope that the elements can have an obvious high sliding effect when they are expanded and retracted.
The previous implementation can use the jQuery slideUp()/slideDown()method. However, on the mobile side, because of the good CSS3 animation support, the mobile JavaScript framework does not provide an animation module. Here comes CSS3 technology naturally.
The author's first reaction is to use the height+overflow:hidden;implementation, there is no performance problem, and there is no need to worry about display problems. But in a blink of an eye, I thought: Many times the content we need to show is dynamic, which means that the height of the content is not fixed (of course, you can also use it overflow-y:auto;for the time being). To achieve this effect, height must use "non-fixed value auto"!
But autonot a value, but a keyword, so in a hidden provision - can not be calculated at between values and keywords, if we use heightin 0pxand autoswitch between, or is unable to form a transition animation effects.
The same is true of
clip-pathattributes in css : many beginners are accustomed to forming animation effects 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:
<div class="accordion">
<input id="collapse1" type="radio" name="tap-input" hidden />
<input id="collapse2" type="radio" name="tap-input" hidden />
<input id="collapse3" type="radio" name="tap-input" hidden />
<article>
<label for="collapse1">列表1</label>
<p>内容1<br>内容2<br>内容3<br>内容4</p>
</article>
<article>
<label for="collapse2">列表2</label>
<p>内容1<br>内容2<br>内容3<br>内容4</p>
</article>
<article>
<label for="collapse3">列表3</label>
<p>内容1<br>内容2<br>内容3<br>内容4</p>
</article>
</div>
.accordion {
width: 300px;
}
.accordion article {
cursor: pointer;
}
label {
display: block;
padding: 0 20px;
height: 40px;
background-color: #f66;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
}
p {
overflow: hidden;
padding: 0 20px;
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) p,
input:nth-child(2):checked ~ article:nth-of-type(2) p,
input:nth-child(3):checked ~ article:nth-of-type(3) p {
border-bottom-width: 1px;
max-height: 130px;
}
In css, min-height/max-heightthe scene that appears must be in adaptive layout or fluid layout. For the expanded max-heightvalue, we only need to ensure that the set value is larger than the content height- because when max-height> height, the element height will be calculated based on the height attribute .
But it is recommended not to set the max-height value too large, after all, the time of transition or animation is "the time to complete the animation" rather than "the time when the content is displayed"
There is another form of display of the retracting effect:
Its characteristic is that when the mouse is hovering over a certain part of the component, the part will expand and squeeze the part next to it, and it will return to its original state when the mouse leaves. If the mouse is quickly passed over it, it will produce the effect of an accordion.
To use JS to achieve the accordion effect, you must monitor mouseenterand mouseleavetwo mouse events, and CSS :hovercan replace the effects of both. So the key to achieving the accordion effect with pure CSS is :hoverthat its core code is as follows:
li {
}
li:hover {
}
For the layout, the better way to achieve the expansion and contraction effect of the elements arranged in a row with the same/different width is flex !
<ul class="accordion">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
.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;
}
It is worth noting here: as some "special" circumstances such as animation delay can be inline style is inserted in HTML, CSS custom variables , you can code simple: from a reconstruction project Speaking CSS3 custom variables in a project How is it used?