如何看源码之Ruby China搜索框动画实现

cnsworder 发布于2019-08-19 17:19 / 2974人阅读

摘要：欢迎交换友链进击的程序媛微博江小湖不要脸的自恋一下我觉得我看源码的能力越来越强了，想看到搜索框动画效果很不错，想试着实现一下。例如只做了输入框的显示隐藏。但是看源码没有设置，有两个属性引起我的注意和，可以猜测这个动画的实现由实现的渐变。

欢迎交换友链 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:

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（我从初学开始就有个毛病，如果不能理解一个框架、插件的原理，我用着心里就不踏实 >_<）。

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

云服务器混合云看动画学算法之:hashtable 百度地图搜索框实现 php搜索框源码用php实现搜索框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78419.html

如何看源码之Ruby China搜索框动画实现

摘要：欢迎交换友链进击的程序媛微博江小湖不要脸的自恋一下我觉得我看源码的能力越来越强了，想看到搜索框动画效果很不错，想试着实现一下。例如只做了输入框的显示隐藏。但是看源码没有设置，有两个属性引起我的注意和，可以猜测这个动画的实现由实现的渐变。欢迎交换友链 Lakers Blog--进击的程序媛Github：https://github.com/younglaker微博: 江小湖Laker ...

plus2047 2019-08-28 18:29 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
fir.im Weekly - 论个人技术影响力是如何炼成的

摘要：每个圈子都有一群能力强且懂得经营自己的人，技术圈也是如此。苹果规定今年月提交给的应用必须支持位，位和位两个架构的存在使得可执行文件增加了一倍多。一款可将音频可视化的库在微博分享出品的一款可将音频可视化的库项目介绍地址网页链接地址网页链接。每个圈子都有一群能力强且懂得经营自己的人，技术圈也是如此。本期 fir.im Weekly 一如往期精选了一些实用的 iOS，Android 开发工...

Tamic 2019-06-25 15:15 评论0 收藏0
fir.im Weekly - 论个人技术影响力是如何炼成的

摘要：每个圈子都有一群能力强且懂得经营自己的人，技术圈也是如此。苹果规定今年月提交给的应用必须支持位，位和位两个架构的存在使得可执行文件增加了一倍多。一款可将音频可视化的库在微博分享出品的一款可将音频可视化的库项目介绍地址网页链接地址网页链接。每个圈子都有一群能力强且懂得经营自己的人，技术圈也是如此。本期 fir.im Weekly 一如往期精选了一些实用的 iOS，Android 开发工...

NicolasHe 2019-06-24 19:23 评论0 收藏0
国内值得关注的官方API集合

摘要：电影豆瓣电影豆瓣电影支持电影条目，影人条目，搜索和榜单等。音乐豆瓣音乐支持音乐信息，评论信息，标签信息，搜索音乐，某个音乐中标记最多的标签，发表修改删除评论，用户对音乐的所有标签等内容。项目地址：https://github.com/marktony/A... 本页仅收集国内部分官方API，如需查看其他版本，请点击这里。目录笔记出行词典电商地图电影即时通讯开发者网...

gaomysion 2019-06-25 11:01 评论0 收藏0