50 Projects 50 Days - Hidden Search Widget 学习记录

项目地址

Hidden Search Widget

展示效果

Hidden Search Widget

实现思路

点击搜索按钮，展开输入框，主要元素就两个：input输入框和button，这两个本身就是行内元素。点击触发的动作拆分为两个，第一个是input输入框出现，第二个是搜索按钮向右移动。
为此，初始状态可以让输入框隐藏在按钮的下方，而点击后，输入框宽度增加，按钮向右移动，实现展开的效果。为此点击触发添加的一个class应该加在两个元素上，又或者两个元素的父元素上。

实现细节

HTML结构

非常简单的一个search父盒子，再在里面添加两个行内元素input和button即可。

<div class="search">
  <input type="text" class="input" placeholder="Search...">
  <button class="btn">
    <i class="fas fa-search"></i>
  </button>
</div>

CSS样式

父盒子只需要设置相对定位即可。input和button都设置成尺寸50*50的盒子，button改为绝对定位，并跟input左边对齐，这样就能完成遮盖住input。

.search {
  position: relative;
}

.input {
  width: 50px;
  height: 50px;
  border: 0;
  padding: 15px;
  transition: width 0.3s ease;
}

.btn {
  width: 50px;
  height: 50px;
  font-size: 24px;
  background-color: #fff;
  border: 0;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
}

当点击按钮后给父盒子添加active的class，这时input变宽，button向右移动，实测发现移动距离要小于input宽度，刚好等于时动画结束时中间会闪过一条间隔线。

.search.active .input {
  width: 200px;
}
.search.active .btn {
  transform: translateX(198px);
}

最后还有一个效果是自动聚焦到输入框，但是原生效果并不好看，因此这里我们消除两个元素获得焦点时的样式。

.input, .btn:focus {
  outline: none;
}

JavaScript逻辑

按钮绑定点击事件，父盒子添加或去除class，并让输入框获得焦点，输入框收起来时被遮盖，所以也无需在意此时是否获得焦点。

const search = document.querySelector('.search');
const input = document.querySelector('.input');
const btn = document.querySelector('.btn');

btn.addEventListener('click', ()=>{
    search.classList.toggle('active');
    input.focus();
})

总结

1. 点击按钮之后的动作有两个：input宽度拉伸，button向右移动，只要实现这两个元素的样式变化就好了。