摘要：歡迎交換友鏈進(jìn)擊的程序媛微博江小湖不要臉的自戀一下我覺得我看源碼的能力越來越強(qiáng)了，想看到搜索框動(dòng)畫效果很不錯(cuò)，想試著實(shí)現(xiàn)一下。例如只做了輸入框的顯示隱藏。但是看源碼沒有設(shè)置，有兩個(gè)屬性引起我的注意和，可以猜測這個(gè)動(dòng)畫的實(shí)現(xiàn)由實(shí)現(xiàn)的漸變。

歡迎交換友鏈 Laker"s Blog--進(jìn)擊的程序媛
Github：https://github.com/younglaker
微博: 江小湖Laker

不要臉的自戀一下——我覺得我看源碼的能力越來越強(qiáng)了，2333~

想看到 Ruby China 搜索框動(dòng)畫效果很不錯(cuò)，想試著實(shí)現(xiàn)一下。最初我的想法是用jQuery的animate：

$("input").animate({width: "toggle"});

題外話，toggle值意味著寬度在0和原本寬度之間切換.

如果這樣用的話，input就要設(shè)為display: none; 并且給input一個(gè)初始的長度。

例如 Demo (只做了輸入框的顯示隱藏)。

但是看 Ruby China 源碼沒有設(shè)置display: none;，有兩個(gè)屬性引起我的注意：width: 0px; 和 transition: all .3s;， 可以猜測這個(gè)動(dòng)畫的實(shí)現(xiàn)由 transition 實(shí)現(xiàn) width 的漸變。

在不斷點(diǎn)擊搜索和取消搜索中可以看到，form 上在增加、刪除 .active，所以搜索是否被觸發(fā)的標(biāo)記綁定在 form 上。

再看CSS，發(fā)現(xiàn)搜索框、查詢按鈕、關(guān)閉按鈕都在動(dòng)畫觸發(fā)后有個(gè)新的樣式出現(xiàn)，名字如.header .form-search.active .XXX，看到這個(gè).form-search.active就確定他們的動(dòng)畫是通過 form 上的 .active 來標(biāo)記的。

然后我摳出以下主要代碼：

本例中將會(huì)用到JavaScript觸發(fā) CSS transition ，詳細(xì)介紹請看我的另一篇文章《花式使用CSS3 transition》。

HTML:

CSS:

.header {
  width: 250px;
  height: 50px;
  position: relative;
  display: block;
}
.search-block {
  float: right;
}
.header .form-search .fa {
    color: #333;
}
.header .form-search {
    font-size: 14px;
    position: relative;
    margin-top: 13px;
    margin-right: 10px;
    padding: 0 15px;
    width: auto;
}
.header .form-search .form-control {
  font-size: 12px;
  border: none;
  width: 0px;
  height: 100%;
  padding: 6px 1px 4px 1px;
  margin-left: 4px;
  background: transparent;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  box-sizing: border-box;
  color: #333;
}

//輸入框的動(dòng)畫部分
.header .form-search.active .form-control {
    width: 150px !important;
    cursor: text;
}
.fa-search:before {
    content: "f002";
}
.header .form-search .fa-search {
  cursor: pointer;
  position: absolute;
  top: 6px;
  right: 0;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

// 搜索按鈕的動(dòng)畫部分
.header .form-search.active .fa-search {
  left: 0;
  right: auto;
}
.header .form-search .btn-close {
  position: absolute;
  top: 6px;
  right: 0px;
  cursor: pointer;
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

// 取消搜索的動(dòng)畫部分
.header .form-search.active .btn-close {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  transform: scale(1, 1);
}

JavaScript：

  $(".btn-search").on("click", function() {
    $(".form-search").addClass("active");
  });

  $(".btn-close").on("click", function() {
    $(".form-search").removeClass("active");
  });

View Demo

我也不是一眼就看出來的，摳這個(gè)效果花了大半天，也是蠻菜的。

分享自己一點(diǎn)點(diǎn)小經(jīng)驗(yàn)：

長期寫代碼的經(jīng)驗(yàn)積累

多猜測多嘗試，不斷重復(fù)原網(wǎng)站的效果，看看代碼有什么變化

把想到的關(guān)鍵詞就google一下，也許能得到啟發(fā)

多看源碼，剛開始很累，后來就習(xí)慣的。我經(jīng)常會(huì)看各種網(wǎng)站源碼，框架也大致看過jQuery、Framework 7。前端這塊的源碼還是比較容易看的。

多模仿多練習(xí)。光看別人的代碼不夠，試著用自己的方式寫寫，然后對照別人的代碼比對不足。我仿jQuery寫了Octjs，仿jCanvas寫了EasyCanvas（我從初學(xué)開始就有個(gè)毛病，如果不能理解一個(gè)框架、插件的原理，我用著心里就不踏實(shí) >_<）。

想起老博客里寫過讀豆瓣源碼的文章，是我大三時(shí)候?qū)懙模?dāng)時(shí)也比較稚嫩，算是第一次看復(fù)雜源碼，畢竟文件多、代碼已壓縮混淆。以供參考：《豆瓣綁定事件的方法初探》 （大學(xué)時(shí)候的博客真是蠻逗比的，哈哈）