怎样看源码之Ruby China搜刮框动画完成

2019年8月30日 90次阅读 来源: 江小湖Laker

迎接交流友链 Laker’s Blog–进击的顺序媛
Github：https://github.com/younglaker
微博: 江小湖Laker

《怎样看源码之Ruby China搜刮框动画完成》

不要脸的自恋一下——我以为我看源码的才能愈来愈强了，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 上。

《怎样看源码之Ruby China搜刮框动画完成》

再看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（我从初学最先就有个缺点，假如不能明白一个框架、插件的道理，我用着内心就不扎实 >_<）。

想起老博客里写过读豆瓣源码的文章，是我大三时刻写的，当时也比较稚嫩，算是第一次看庞杂源码，毕竟文件多、代码已紧缩殽杂。以供参考：《豆瓣绑定事宜的要领初探》 （大学时刻的博客真是蛮逗比的，哈哈）

    原文作者：江小湖Laker
    原文地址: https://segmentfault.com/a/1190000004250099
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞