純CSS實(shí)現(xiàn)頁面中的列表收拉效果
我要評論你可能經(jīng)常見到下面這樣的效果：
沒錯，就是頁面上常用的“展開收起”交互形式，通常的做法就是控制display屬性值在none和其他值之間切換，但是雖說功能可以實(shí)現(xiàn)，效果卻非常生硬，所以就會有這樣的一個需求 —— 希望元素在展開收起時能夠有明顯的高度滑動效果。
以前的實(shí)現(xiàn)可以用jQuery的slideUp()/slideDown()方法，但是，在移動端，因?yàn)镃SS3動畫支持良好，所以移動端的JavaScript框架都是沒有提供動畫模塊的。這里自然而然就想到了CSS3技術(shù)。
筆者的第一反應(yīng)就是用height+overflow:hidden;實(shí)現(xiàn)，既沒有性能問題，也不必?fù)?dān)心顯示問題。但是轉(zhuǎn)眼間就想到：很多時候我們需要展現(xiàn)的內(nèi)容都是動態(tài)的，也就是說內(nèi)容高度是不固定的（當(dāng)然，你也可以用overflow-y:auto; 暫且不論）。而要達(dá)到這種效果，height就要使用“非固定值auto”！
但是auto并不是數(shù)值，而是一個關(guān)鍵字，所以在一個隱性規(guī)定 —— 數(shù)值和關(guān)鍵字之間無法計(jì)算 下，如果我們使用height在0px和auto之間切換，是無法形成過渡或動畫效果的。
同樣的還有css中的
clip-path屬性：很多初學(xué)者習(xí)慣于在none和具體值之間形成動畫效果，這是不可能的。
因此，想要達(dá)到文首的效果，筆者推薦max-height屬性：
<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>內(nèi)容1<br>內(nèi)容2<br>內(nèi)容3<br>內(nèi)容4</p> </article> <article> <label for="collapse2">列表2</label> <p>內(nèi)容1<br>內(nèi)容2<br>內(nèi)容3<br>內(nèi)容4</p> </article> <article> <label for="collapse3">列表3</label> <p>內(nèi)容1<br>內(nèi)容2<br>內(nèi)容3<br>內(nèi)容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;
}
在css中，min-height/max-height出現(xiàn)的場景一定是自適應(yīng)布局或者流體布局中。而對于展開后的max-height值，我們只需要保證設(shè)定值比內(nèi)容高度大即可 —— 因?yàn)樵趍ax-height > height 時，元素高度就會以height屬性的高度計(jì)算。
但是建議不要把max-height值設(shè)置的太大，畢竟transition或animation的時間是“完成動畫的時間”而不是“內(nèi)容展示出來的時間”
收拉效果還有一種展現(xiàn)形式：
其特點(diǎn)是鼠標(biāo)懸浮到組件的某個部分，該部分就會擴(kuò)張開來并擠壓旁邊的部分，當(dāng)鼠標(biāo)離開時就恢復(fù)原狀。若鼠標(biāo)快速在其上面略過，就會產(chǎn)生手風(fēng)琴彈琴的效果。
使用JS實(shí)現(xiàn)手風(fēng)琴效果，必須監(jiān)聽mouseenter和mouseleave兩個鼠標(biāo)事件，而CSS中的:hover可代替兩者的效果。所以純CSS實(shí)現(xiàn)手風(fēng)琴效果的關(guān)鍵就是:hover ，其核心代碼如下：
li {
}
li:hover {
}
而對布局來說，這種以相同/不同寬度排列在一排的元素想要實(shí)現(xiàn)在一行內(nèi)的展開收縮效果，比較好的方式就是 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;
}
這里有一點(diǎn)值得注意：像有些“特殊”情況比如 animation 的延遲，可以以 內(nèi)聯(lián)style 的方式在HTML中插入 CSS自定義變量 ，可以簡潔代碼：從一次項(xiàng)目重構(gòu)說起CSS3自定義變量在項(xiàng)目中是如何使用的？
到此這篇關(guān)于純CSS實(shí)現(xiàn)頁面中的列表收拉效果的文章就介紹到這了,更多相關(guān)css頁面列表收拉內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
讓CSS flex布局最后一行列表左對齊的N種方法(小結(jié))
這篇文章主要介紹了讓CSS flex布局最后一行列表左對齊的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2020-07-23
這篇文章主要介紹了CSS字體、文本、列表屬性的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-22CSS 有序或者無序列表的前面的標(biāo)記 list-style-type 屬性的實(shí)現(xiàn)
這篇文章主要介紹了CSS 有序或者無序列表的前面的標(biāo)記 list-style-type 屬性的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的2020-02-24css中有序無序列表項(xiàng)list樣式設(shè)置方法
這篇文章主要介紹了css中有序無序列表項(xiàng)list樣式設(shè)置方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-17
這篇文章主要介紹了CSS如何設(shè)置列表樣式屬性(看這篇文章就夠用了)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2019-11-25css列表滑動防止被底部遮住和適配屏幕長一點(diǎn)的機(jī)型處理
這篇文章主要介紹了css列表滑動防止被底部遮住和適配屏幕長一點(diǎn)的機(jī)型處理 ,需要的朋友可以參考下2019-07-09
