Pure CSS realizes the effect of list retraction and pull in the page

Time:2021-10-11

You may often see the following effects:

slide-animation

Yes, it is the common interactive form of “expand and collapse” on the page. The usual way is to control the value of the display attribute to switch between none and other values. However, although the function can be realized, the effect is very stiff. Therefore, there is a demand that the element can have an obvious high sliding effect when expanding and collapsing.

Previous implementations can use jQueryslideUp()/slideDown()However, on the mobile side, because CSS3 animation supports well, the JavaScript frameworks on the mobile side do not provide animation modules. CSS3 technology naturally comes to mind here.


The author’s first reaction was to useheight+overflow:hidden;Implementation, neither performance problems nor display problems. But in the twinkling of an eye, I thought: most of the time, the content we need to show is dynamic, that is, the content height is not fixed (of course, you can also use it)overflow-y:auto;For the time being). To achieve this effect, height needs to use “non fixed value Auto”!

howeverautoIt is not a numerical value, but a keyword, so under an implicit provision that the value and keyword cannot be calculated, if we useheightstay0pxandautoThe transition or animation effect cannot be formed by switching between.

The same is true of CSSclip-pathAttribute: many beginners are used to forming animation effects between none and specific values, which is impossible.

Therefore, in order 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" > LIST1 < / label >
		<p>Content 1 < br > content 2 < br > content 3 < br > content 4</p>
	</article>
	<article>
		< label for = "collapse2" > List2 < / label >
		<p>Content 1 < br > content 2 < br > content 3 < br > content 4</p>
	</article>
	<article>
		< label for = "collapse3" > list3 < / label >
		<p>Content 1 < br > content 2 < br > content 3 < br > content 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 must be adaptive layout or fluid layout. For the expandedmax-heightValue, we only need to ensure that the set value is higher than the content height——Because when Max height > height, the element height will be calculated based on the height of the height attribute

However, 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 to display the content”


There is another form of retraction effect:

slideDown-animation

It is characterized in that when the mouse is suspended to a certain part of the component, the part will expand and squeeze the part next to it. When the mouse leaves, it will return to its original state. If the mouse quickly over it, it will produce the effect of accordion playing.

To realize the accordion effect using JS, you must monitormouseenterandmouseleaveTwo mouse events, while in CSS:hoverCan replace the effect of both. So the key to realizing accordion effect with pure CSS is:hover, its core code is as follows:


li {
}
li:hover {
}

For layout, a better way to expand and shrink elements arranged in a row with the same / different widths in a row isflex


<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 that in some “special” cases, such as the delay of animation, you canInline styleInsert in HTMLCSS custom variables, you can simplify the code:How are CSS3 custom variables used in a project?

This is the end of this article about the list pull effect in pure CSS pages. For more information about CSS page list pull, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Seven Python code review tools recommended

althoughPythonLanguage is one of the most flexible development languages at present, but developers often abuse its flexibility and even violate relevant standards. So PythoncodeThe following common quality problems often occur: Some unused modules have been imported Function is missing arguments in various calls The appropriate format indentation is missing Missing appropriate spaces before and after […]