頂部菜單欄中放置搜索框是一個(gè)常見(jiàn)的場(chǎng)景，但如果搜索功能使用的不那么頻繁，同時(shí)菜單欄中內(nèi)容本來(lái)就比較擁擠，再放一個(gè)完整的搜索框在那就顯得不那么美觀。因此也有一個(gè)挺常見(jiàn)的做法是，只放一個(gè)搜索圖標(biāo)，需要時(shí)再顯示整個(gè)搜索框，如下圖所示：

實(shí)現(xiàn)思路

起始狀態(tài)時(shí)搜索框沒(méi)有顯示，鼠標(biāo)移入后從右側(cè)滑入，因此不能使用搜索框自身的 hidden 或透明度屬性，需要使用父元素的 overflow: hidden 將其隱藏，并把輸入框移動(dòng)到父元素的顯示范圍以外，需要時(shí)再移動(dòng)回來(lái)。

CSS 中有 transition 和 animation 兩種方式來(lái)實(shí)現(xiàn)動(dòng)畫效果，由于這里只有搜索框位置移動(dòng)、圖標(biāo)透明度改變兩個(gè)簡(jiǎn)單效果，用 transition 就足夠了。

這兩個(gè)動(dòng)畫本身實(shí)現(xiàn)很簡(jiǎn)單，但有一些小細(xì)節(jié)：

• 兩個(gè)動(dòng)畫不是同時(shí)進(jìn)行，而是有先后，需要使用 transition-delay 實(shí)現(xiàn)兩個(gè)效果的序列
• 顯示、隱藏兩個(gè)過(guò)程好像完全一樣，但仔細(xì)看會(huì)發(fā)現(xiàn)動(dòng)畫的順序有不同：顯示時(shí)圖標(biāo)先消失、搜索框后移入；隱藏時(shí)搜索框先移出、圖標(biāo)后出現(xiàn)。因此需要單獨(dú)設(shè)置。

代碼實(shí)現(xiàn)

完整的樣式表附在文末，不想看具體思路的可以跳過(guò)本節(jié)直接去復(fù)制。

基礎(chǔ)樣式

先普普通通的寫一下基礎(chǔ)樣式，這里用的圖標(biāo)是 material design icon。

<div class="search">
  <input class="bar" placeholder="請(qǐng)輸入內(nèi)容" />
  <span class="material-icons icon">search</span>
</div>
.icon {
  width: 24px;
  height: 24px;
}

.bar {
  height: 26px;
  width: 200px;
  padding: 1px 9px;
  border: #fff 1px solid;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
}
::placeholder {
  color: #ccc;	/* 修改input中placeholder的顏色*/
}

.search {
  height: 30px;
  display: flex;
  align-items: center;
}

隱藏搜索框

移動(dòng)搜索框位置的方法有很多，比如可以使用 absolute 或者 relative 定位。

• 如果將搜索框設(shè)為 absolute 定位（position: absolute），搜索框會(huì)從輸入流中抽出，通俗的說(shuō)就是父元素在渲染時(shí)會(huì)當(dāng)它不存在，這樣父元素的寬度、搜索圖標(biāo)的位置都需要額外指定。
• 相比之下，relative 定位（position: relative）只是簡(jiǎn)單地移動(dòng)元素的位置，對(duì)其他元素沒(méi)有任何影響，在此處使用更加簡(jiǎn)單一些。

還有一種更直接的方法：transform 屬性。通過(guò)這個(gè)屬性，可以實(shí)現(xiàn)對(duì)元素的平移、旋轉(zhuǎn)、縮放等變形操作，同時(shí)對(duì)其他元素不產(chǎn)生影響。在這里使用的 translateX() 屬性就是將元素沿X軸（橫向）平移指定距離。單從平移來(lái)說(shuō)，各方面效果和使用 relative 定位沒(méi)有明顯區(qū)別。

PS: transition, transform, translate 這幾個(gè)詞不會(huì)只有我一直分不清吧555

.search {
  overflow: hidden;
}
.bar {
  transform: translateX(224px);
  /* 
    上一句也可以替換為下面兩句，效果相同
    position: relative;
    left: 224px;
  */
}

動(dòng)畫序列

動(dòng)畫通過(guò) transition 屬性實(shí)現(xiàn)。transition 是 transition-property，transition-duration，transition-timing-function 和 transition-delay 四個(gè)屬性的簡(jiǎn)寫（類比border: red 1px solid;），四個(gè)屬性分別指定了過(guò)渡動(dòng)畫的屬性、持續(xù)時(shí)間、時(shí)間曲線、延遲時(shí)間。

• 屬性即要應(yīng)用過(guò)渡動(dòng)畫的屬性
• 時(shí)間曲線是動(dòng)畫的速度變化，比如開(kāi)始慢、中間快、結(jié)束慢，可以比勻速運(yùn)動(dòng)更好看更平滑
• 延遲時(shí)間即達(dá)到觸發(fā)條件后延遲一段時(shí)間再觸發(fā)動(dòng)畫，可以用來(lái)實(shí)現(xiàn)多個(gè)動(dòng)畫有先后順序地執(zhí)行

transition 屬性本質(zhì)上是小學(xué)電腦課學(xué)過(guò)的 flash 補(bǔ)間動(dòng)畫，指定一個(gè)屬性的起止兩個(gè)狀態(tài)，自動(dòng)補(bǔ)全中間的過(guò)渡動(dòng)畫。元素本來(lái)的屬性是起始狀態(tài)，鼠標(biāo)移上后的動(dòng)畫，自然元素的 :hover 偽類屬性是終止?fàn)顟B(tài)。

.icon {
  opacity: 1;
  transition: opacity 0.3s ease; /* delay 屬性默認(rèn)值為0 */
}
.search:hover .icon {
  opacity: 0;
}

.bar {
  transform: translateX(224px);
  transition: transform 0.3s ease-in-out 0.3s;
}
.search:hover .bar {
  transform: translateX(24px);
}

逆向序列

這樣能夠基本實(shí)現(xiàn)想要的動(dòng)畫效果了，但是在隱藏搜索框的時(shí)候也是圖標(biāo)先出現(xiàn)，搜索框后滑出，不夠美觀。解決方案也很簡(jiǎn)單，為 hover 偽類單獨(dú)設(shè)置不同的 delay 屬性即可。

有一點(diǎn)需要注意一下，hover 偽類中的 delay 屬性對(duì)應(yīng)的是鼠標(biāo)移上時(shí)的延遲，元素本身屬性中的 delay 對(duì)應(yīng)的是鼠標(biāo)移出時(shí)恢復(fù)動(dòng)畫的延遲?？赡芎偷谝环磻?yīng)不太一樣（不過(guò)仔細(xì)想想倒也挺合理的），別寫反了。

.icon {
  transition: opacity 0.3s ease 0.3s;
}

.search:hover .icon {
  transition-delay: 0s;
}

.bar {
  transition: transform 0.3s ease-in-out 0s;
}

.search:hover .bar {
  transition-delay: 0.3s;
}

觸發(fā)區(qū)域

其實(shí)但就想要的動(dòng)畫效果，以上幾步就足夠了。但是這樣還有一個(gè)小問(wèn)題：動(dòng)畫是通過(guò)父元素 .search 的 hover 狀態(tài)觸發(fā)的，因此如果鼠標(biāo)移入搜索圖標(biāo)左側(cè)本來(lái)應(yīng)該是搜索框的位置（但是現(xiàn)在什么也沒(méi)有，被隱藏了），還是會(huì)觸發(fā)顯示搜索框動(dòng)畫。這其實(shí)也不是不能接受。

如果想只在鼠標(biāo)懸停在圖標(biāo)時(shí)才觸發(fā)動(dòng)畫，只要將觸發(fā)條件改成 .icon 的懸停狀態(tài)即可。不過(guò)由于 CSS 中只有后繼元素選擇器而沒(méi)有前驅(qū)元素選擇器（因?yàn)?DOM 渲染 CSS 的原則是不能出現(xiàn)回溯），需要調(diào)整一下 HTML 中圖標(biāo)和搜索框的順序。

<div class="search">
  <span class="material-icons icon">search</span>
  <input class="bar" placeholder="請(qǐng)輸入內(nèi)容" />
</div>

然后修改相應(yīng)的樣式和選擇器即可。

.icon:hover {
  opacity: 0;
  transition-delay: 0s;
}

.icon:hover + .bar {	/* + 緊鄰兄弟選擇器 */
  transform: translateX(24px);
  transition-delay: 0.3s;
}

.search {
  display: flex;
  flex-direction: row-reverse;	/* 讓搜索框還在圖標(biāo)左邊 */
}

附錄：完整樣式表

<div class="search">
  <span class="material-icons icon">search</span>
  <input class="bar" placeholder="請(qǐng)輸入內(nèi)容" />
</div>
.icon {
  width: 24px;
  height: 24px;
  opacity: 1;
  transition: opacity 0.3s ease 0.3s;
}

.icon:hover {
  opacity: 0;
  transition-delay: 0s;
}

.bar {
  height: 26px;
  width: 180px;
  padding: 1px 9px;
  border: #fff 1px solid;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
  transform: translateX(224px);
  transition: transform 0.3s ease-in-out 0s;
}

.icon:hover + .bar {
  transform: translateX(24px);
  transition-delay: 0.3s;
}

::placeholder {
  color: #ccc;
}

.search {
  height: 30px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  overflow: hidden;
}

到此這篇關(guān)于CSS實(shí)現(xiàn)隱藏搜索框功能(動(dòng)畫正反向序列)的文章就介紹到這了,更多相關(guān)css動(dòng)畫正反向序列內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論