项目地址

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向右移动，只要实现这两个元素的样式变化就好了。