你可能經(jīng)常見到下面這樣的效果:
沒錯(cuò),就是頁(yè)面上常用的“展開收起”交互形式,通常的做法就是控制 display 屬性值在 none 和其他值之間切換,但是雖說功能可以實(shí)現(xiàn),效果卻非常生硬,所以就會(huì)有這樣的一個(gè)需求 —— 希望元素在展開收起時(shí)能夠有明顯的高度滑動(dòng)效果。
以前的實(shí)現(xiàn)可以用 jQuery 的?slideUp()/slideDown()
?方法,但是,在移動(dòng)端,因?yàn)?CSS3 動(dòng)畫支持良好,所以移動(dòng)端的 JavaScript框架都是沒有提供動(dòng)畫模塊的。這里自然而然就想到了CSS3技術(shù)。
筆者的第一反應(yīng)就是用?height+overflow:hidden;
?實(shí)現(xiàn),既沒有性能問題,也不必?fù)?dān)心顯示問題。但是轉(zhuǎn)眼間就想到:很多時(shí)候我們需要展現(xiàn)的內(nèi)容都是動(dòng)態(tài)的,也就是說內(nèi)容高度是不固定的(當(dāng)然,你也可以用?overflow-y:auto;
? 暫且不論)。而要達(dá)到這種效果,height 就要使用“非固定值 auto”!
但是?auto
?并不是數(shù)值,而是一個(gè)關(guān)鍵字,所以在一個(gè)隱性規(guī)定 —— 數(shù)值和關(guān)鍵字之間無法計(jì)算 下,如果我們使用?height
?在?0px
?和?auto
?之間切換,是無法形成過渡或動(dòng)畫效果的。
同樣的還有 css 中的?
clip-path
?屬性:很多初學(xué)者習(xí)慣于在 none 和具體值之間形成動(dòng)畫效果,這是不可能的。
因此,想要達(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)的場(chǎng)景一定是自適應(yīng)布局或者流體布局中。而對(duì)于展開后的?max-height
?值,我們只需要保證設(shè)定值比內(nèi)容高度大即可 —— 因?yàn)樵趍ax-height > height 時(shí),元素高度就會(huì)以height屬性的高度計(jì)算。
但是建議不要把max-height值設(shè)置的太大,畢竟transition或animation的時(shí)間是“完成動(dòng)畫的時(shí)間”而不是“內(nèi)容展示出來的時(shí)間”
收拉效果還有一種展現(xiàn)形式:
其特點(diǎn)是鼠標(biāo)懸浮到組件的某個(gè)部分,該部分就會(huì)擴(kuò)張開來并擠壓旁邊的部分,當(dāng)鼠標(biāo)離開時(shí)就恢復(fù)原狀。若鼠標(biāo)快速在其上面略過,就會(huì)產(chǎn)生手風(fēng)琴?gòu)椙俚男Ч?/p>
使用 JS 實(shí)現(xiàn)手風(fēng)琴效果,必須監(jiān)聽?mouseenter
?和?mouseleave
?兩個(gè)鼠標(biāo)事件,而CSS中的?:hover
?可代替兩者的效果。所以純 CSS實(shí)現(xiàn)手風(fēng)琴效果的關(guān)鍵就是?:hover
?,其核心代碼如下:
li {
}
li:hover {
}
而對(duì)布局來說,這種以相同/不同寬度排列在一排的元素想要實(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自定義變量