前端 | 隱藏搜索框：CSS 影片正反向序列-有解無憂

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

搜索框影片

實作思路

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

CSS 中有 transition 和 animation 兩種方式來實作影片效果，由于這里只有搜索框位置移動、圖示透明度改變兩個簡單效果，用 transition 就足夠了，

這兩個影片本身實作很簡單，但有一些小細節：

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

代碼實作

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

基礎樣式

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

<div >
  <input  placeholder="請輸入內容" />
  <span >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 屬性，通過這個屬性，可以實作對元素的平移、旋轉、縮放等變形操作，同時對其他元素不產生影響，在這里使用的 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 >
  <span >search</span>
  <input  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 >
  <span >search</span>
  <input  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;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288077.html

標籤：Html/Css

上一篇：Vue cli + Element plus的查詢和洗掉

下一篇：自定義博客園主題樣式