（中級）用CSS3過渡設計搜尋表單

李鬆峰發表於2012-12-10
CSSS3

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第6章“介面元件”。

幾乎每個站點都會提供一種搜尋機制。我猜，恐怕你很難把一個搜尋框當成一個表單，但它的確是——一個欄位的表單。搜尋表單提供了簡單的搜尋功能，它隨時恭候在標題欄的右側，那兒幾乎是它的專屬位置。蘋果網站上那個小巧、低調的搜尋框，在使用者點選它的時候會擴充套件開來，為輸入關鍵詞提供更多空間。它旁邊甚至連一個按鈕都沒有——使用者都知道點選、輸入，然後再按Return或Enter鍵。這種搜尋表單的form元素中只需要包含一個label和一個input。在下面的例子中，我會把這個表單放在一個header標籤中，以便得到一個包含搜尋功能的頁首。

<header>
    <form class="stylin_form_search1" action="#" method="post">
        <label for="search">search</label>
        <input type="search" id="search" name="search"
        placeholder="search" />
    </form>
</header>

借這個例子，我們正好可以講一講CSS3的過渡功能。過渡可以基於某個CSS屬性實現動畫效果。在這個例子中，我們要利用它實現文字框動態變寬的效果。對應的CSS如下：

* {margin:0; padding:0;}
header { /*在這個例子中代表頁首*/
    font-family:helvetica, arial, sans-serif;
    display:block;
    overflow:hidden;
    width:500px;
    margin:30px;
    border-radius:6px;
    background-color:#ddd;
}
form.stylin_form_search1 { /*包含label和input的容器*/
    float:right;
    width:200px;
    margin:5px; padding:5px;
}
form.stylin_form_search1 input {
    float:right;
    width:70px;
    padding:2px 0 3px 5px;
    outline:none; /*去掉預設的突顯輪廓線*/
    font-size:.8em; border-color:#eee #ccc #ccc #eee; 
    border-radius:10px; -webkit-transition:2s width; /*針對其他瀏覽器的廠商字首*/
}
form.stylin_form_search1 input:focus {width:200px;}
form.stylin_form_search1 label {display:none;} /*標註是必要的，但不用顯示出來*/

enter image description here
圖6-19 點選這個小巧的搜尋框，它會自動加寬，佔位符文字也會被輸入的關鍵字取代

這裡的form元素是“有寬度的”，而且是向右浮動的。表單內部的input也是向右浮動，如圖6-19上面所示。雖然label元素沒有顯示出來，但它是必須要加的。文字框中的文字由placeholder屬性生成，只要使用者一開始輸入，這些佔位符文字就會自動隱藏，如圖6-19下面所示。

運用CSS3過渡

在前面的CSS中，input規則將該欄位寬度設定為70畫素，input:focus規則將該欄位寬度修改成了200畫素。這意味著，在使用者單擊搜尋框讓它獲得鍵盤焦點之後，欄位寬度會改變。不過，由於現在有了transition:2s width;宣告，欄位不會突然擴充套件到新寬度，而是會用兩秒鐘時間平滑地伸展到200畫素。必須注意，CSS3的過渡宣告要放在設定初始狀態的規則中。而且，transition屬性需要使用帶廠商字首的形式——這裡只示範了帶有WebKit（Safari/Chrome）字首的屬性。下一章，我們還會在一個完整的頁面中用到這個搜尋表單。另外，下載的本書原始碼中還包含它的幾個不同版本。要了解有關使用CSS過渡的更多資訊，請參考附註“CSS3過渡”。

CSS3過渡

CSS3過渡可以讓CSS屬性產生動畫效果。平常被某些事件觸發時變化很突然的樣式，比如滑鼠懸停時改變連結顏色，使用過渡後會在指定的時間段內逐漸變化。第一條CSS規則設定屬性的初始狀態和過渡引數。第二條CSS規則設定事件發生時屬性的目標狀態。

在下面這個例子中，使用者單擊表單輸入欄位後，輸入框的邊框顏色會從黑色變化為綠色，過渡週期為兩秒鐘。

input {border-color:black; transition:border-color 2s;}  
input:focus {border-color:green;}

請注意，使用transition屬性時要針對所有瀏覽器新增廠商字首。

通常，過渡動畫是由使用者滑鼠懸停時的:hover偽類規則和表單元素獲得焦點時的:focus偽類規則觸發的。除此之外，還可以在一個帶類名選擇符的規則中設定新狀態，然後通過JavaScript（或jQuery、MooTools等JavaScript庫）為元素新增這個類名來觸發過渡，新增類名的時機可以是滑鼠點選或其他事件發生時。

有五個過渡屬性：

  • transition-property，過渡的CSS屬性名，比如color、width；
  • transition-duration，過渡的持續時間，以秒或毫秒設定，比如2s、500ms；
  • transition-timing-function，過渡的調速函式，決定動畫效果是否平滑，或者是先慢後快或先快慢，比如ease-in、ease-out、ease-in-out或linear（預設值）；
  • transition-delay，過渡開始前的延遲時間，以秒或毫秒設定，比如1s、200ms；
  • transition，過渡的簡寫屬性，例如transition:color 2s ease-in 1ms;。

很多（並非全部）CSS屬性都可以通過transition屬性來實現動畫效果。至於哪些屬性可以實現動畫效果，可以參考這個連結：http://www.w3.org/TR/css3-transitions/#animatable-properties，這個頁面是W3C對CSS3 Transitions Module的官方陳述。另外，下面這篇介紹CSS3過渡的文章也非常值得一看：http://www.css3.info/preview/css3-transitions。

相關文章