50projects50days知识点-hidden-search

示例网址：

https://50projects50days.com/projects/hidden-search-widget/

http://50projects.tc.cluski.top/50projects50days/hidden-search/

效果：

思路

搜索框本来是没有宽度的，在点击搜索按钮之后，给了搜索框一个宽度，在加上动画就达到了上面的效果

focus()

在例子中，点击搜索按钮之后，js中会有一个focus()操作，是光标停留在输入框中

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