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

實現(xiàn)思路

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

CSS 中有 transition 和 animation 兩種方式來實現(xiàn)動畫效果，由于這里只有搜索框位置移動、圖標透明度改變兩個簡單效果，用 transition 就足夠了。

這兩個動畫本身實現(xiàn)很簡單，但有一些小細節(jié)：

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

代碼實現(xiàn)

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

基礎樣式

先普普通通的寫一下基礎樣式，這里用的圖標是 material design icon。

<div class="search">
  <input class="bar" placeholder="請輸入內(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;
}

隱藏搜索框

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

• 如果將搜索框設為 absolute 定位（position: absolute），搜索框會從輸入流中抽出，通俗的說就是父元素在渲染時會當它不存在，這樣父元素的寬度、搜索圖標的位置都需要額外指定。
• 相比之下，relative 定位（position: relative）只是簡單地移動元素的位置，對其他元素沒有任何影響，在此處使用更加簡單一些。

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

PS: transition, transform, translate 這幾個詞不會只有我一直分不清吧555

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

動畫序列

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

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

transition 屬性本質(zhì)上是小學電腦課學過的 flash 補間動畫，指定一個屬性的起止兩個狀態(tài)，自動補全中間的過渡動畫。元素本來的屬性是起始狀態(tài)，鼠標移上后的動畫，自然元素的 :hover 偽類屬性是終止狀態(tài)。

.icon {
  opacity: 1;
  transition: opacity 0.3s ease; /* delay 屬性默認值為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);
}

逆向序列

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

有一點需要注意一下，hover 偽類中的 delay 屬性對應的是鼠標移上時的延遲，元素本身屬性中的 delay 對應的是鼠標移出時恢復動畫的延遲。可能和第一反應不太一樣（不過仔細想想倒也挺合理的），別寫反了。

.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ū)域

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

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

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

然后修改相應的樣式和選擇器即可。

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

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

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

附錄：完整樣式表

<div class="search">
  <span class="material-icons icon">search</span>
  <input class="bar" placeholder="請輸入內(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;
}

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

最新評論