如何看源碼之Ruby China搜索框動畫實現

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

不要臉的自戀一下——我以爲我看源碼的能力愈來愈強了，2333~

想看到 Ruby China 搜索框動畫效果很不錯，想試着實現一下。最初個人想法是用jQuery的animate：

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

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

若是這樣用的話，input就要設爲display: none; 而且給input一個初始的長度。

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

可是看 Ruby China 源碼沒有設置display: none;，有兩個屬性引發個人注意：width: 0px; 和 transition: all .3s;， 能夠猜想這個動畫的實現由 transition 實現 width 的漸變。

在不斷點擊搜索和取消搜索中能夠看到，form 上在增長、刪除 .active，因此搜索是否被觸發的標記綁定在 form 上。

再看CSS，發現搜索框、查詢按鈕、關閉按鈕都在動畫觸發後有個新的樣式出現，名字如.header .form-search.active .XXX，看到這個.form-search.active就肯定他們的動畫是經過 form 上的 .active 來標記的。

而後我摳出如下主要代碼：

本例中將會用到JavaScript觸發 CSS transition ，詳細介紹請看個人另外一篇文章《花式使用CSS3 transition》。

HTML:

<div class="header">
      <div class="search-block">
        <form class="navbar-form form-search" action="/search/all" method="get">
          <div class="form-group">
            <input class="form-control search-box" name="searchKey" type="text" value="" placeholder="搜索本站內容">
          </div>
          <i class="fa btn-search fa-search"></i>
          <i class="fa btn-close fa-times-circle"></i>
        </form>
      </div>
    </div>

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

//輸入框的動畫部分
.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;
}

// 搜索按鈕的動畫部分
.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;
}

// 取消搜索的動畫部分
.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

小結

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

分享本身一點點小經驗：

• 長期寫代碼的經驗積累

• 多猜想多嘗試，不斷重複原網站的效果，看看代碼有什麼變化

• 把想到的關鍵詞就google一下，也許能獲得啓發

• 多看源碼，剛開始很累，後來就習慣的。我常常會看各類網站源碼，框架也大體看過jQuery、Framework 7。前端這塊的源碼仍是比較容易看的。

• 多模仿多練習。光看別人的代碼不夠，試着用本身的方式寫寫，而後對照別人的代碼比對不足。我仿jQuery寫了Octjs，仿jCanvas寫了EasyCanvas（我從初學開始就有個毛病，若是不能理解一個框架、插件的原理，我用着內心就不踏實 >_<）。

想起老博客裏寫過讀豆瓣源碼的文章，是我大三時候寫的，當時也比較稚嫩，算是第一次看複雜源碼，畢竟文件多、代碼已壓縮混淆。以供參考：《豆瓣綁定事件的方法初探》 （大學時候的博客真是蠻逗比的，哈哈）