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

實現思路

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

css中有transition和animation兩種方式來實現動畫效果，由於這裡只有搜尋框位置移動、圖示透明度改變兩個簡單效果，用transition就足夠了。

這兩個動畫本身實現很簡單，但有一些小細節：

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

程式碼實現

完整的樣式表附在文末，不想看具體思路的可以跳過本節直接去複製。

基礎樣式

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

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

https://www.98891.com/article-4-1.html

隱藏搜尋框

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

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

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

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

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

動畫序列

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

屬性即要應用過渡動畫的屬性

時間曲線是動畫的速度變化，比如開始慢、中間快、結束慢，可以比勻速運動更好看更平滑

延遲時間即達到觸發條件後延遲一段時間再觸發動畫，可以用來實現多個動畫有先後順序地執行

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

.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);
}

逆向序列

這樣能夠基本實現想要的動畫效果了，但是在隱藏搜尋框的時候也是圖示先出現，搜尋框後滑出，不夠美觀。解決方案也很簡單，為 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;
}

觸發區域

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

如果想只在滑鼠懸停在圖示時才觸發動畫，只要將觸發條件改成 .icon 的懸停狀態即可。不過由於css中只有後繼元素選擇器而沒有前驅元素選擇器（因為 DOM 渲染 CSS 的原則是不能出現回溯），需要調整一下html中圖示和搜尋框的順序。

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