May 30, 2021 Article blog
You may often see the following effects:
Yes, it's the "expand and put" interaction that's commonly used on the page, and it's common practice to control display property values to switch between none and other values, but while functionality is possible, the effect is very rigid, so there's a need for elements to slide significantly when they're unwinded.
Previous implementations could use jQuery's
slideUp()/slideDown()
method, but on the mobile side, the JavaScript framework on the mobile side did not provide animation modules because CSS3 animation support was good.
CSS3 technology is naturally thought of here.
The author's first reaction is to use
height+overflow:hidden;
implementation, with no performance issues and no need to worry about display issues. B
ut in the blink of an eye you think: a lot of the time what we need to show is dynamic, that is, the content height is not fixed (of course, you can also use
overflow-y:auto;
Regardless of).
To achieve this effect, height uses "non-fixed value auto"!
But
auto
is not a numeric value, but a keyword, so under a hidden rule -- no calculation between values and keywords -- if we use
height
to switch
0px
and
auto
we can't create a transition or animation effect.
There is also the
clip-path
property in css: it is not possible for many beginners to animate between none and specific values.
Therefore, in order to achieve the effect of the header, the author recommends the max-height property:
<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 csss, the scene in
min-height/max-height
appears must be in an adaptive or fluid layout. F
or the expanded
max-height
value, we only need to make sure that the set value is higher than the content height --
because when max-height > height, the element height is calculated at the height of the height property.
However, it is not recommended to set the max-height value too large, after all, the time for transition or animation is "time to complete the animation" rather than "time for the content to be displayed"
The pull effect also has a form of presentation:
It is characterized by the mouse hovering over a part of the component that expands and squeezes the next part, restoring it to its original state when the mouse leaves. If the mouse quickly skips it, it will produce the effect of the accordion playing the piano.
Using JS for accordion effects, you must listen for
mouseenter
and
mouseleave
mouse events, and
:hover
in CSS can replace both.
So the key to a pure CSS accordion effect is
:hover
whose core code is as follows:
li {
}
li:hover {
}
For layout, this kind of elements arranged in the same/different widths in a row want to achieve the expansion and shrink effect within a row, the better way 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's worth noting here that, like some "special" cases, such as the delay of animation, you can insert CSS custom variables into html in an inline style