「原生练手」搜索框点击展开特效让你来实现，你会如何实现？

点击搜索按钮展开搜索输入框这样一个简单的功能，如果让你实现你会怎么实现呢？欢迎在评论区留言讨论

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gpaadC1O-1658297401556)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e6e1a4c20f443719481caac3b5eadea~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

1. 思路分析

首先分析整个搜索输入框可以发现，我们至少需要一个输入框和一个搜索按钮，所以可以考虑把它们放进一个容器里面，然后给容器添加一个特殊的类名.active，用来区分搜索框点击和未被点击时的样式，这个容器就叫.search-container吧

为什么是给容器添加.active而不是单独给输入框和搜索按钮添加呢？因为点击搜索按钮后，不仅仅涉及到将输入框展开，还涉及到搜索按钮的位置变动，都是属于容器激活时才要处理的样式，所以将类名添加在.active上更为合适

然后我们还需要理清一下整个功能涉及到哪些事件：

1. 点击搜索按钮
   1. 给整个容器添加一个.active类名，并且在css中为这个类名添加样式，将输入框的宽度变大，同时使用transition添加过渡效果
   2. 将焦点移至input输入框中
2. 输入框失去焦点
   1. 失去焦点后应当将容器的.active类名移除，让输入框和搜索按钮恢复原来的状态

---

2. HTML 结构

根据以上的思路分析，我们可以先写出整体的HTML结构

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

结构很简单，没什么好说的

---

3. CSS 样式

3.1 搜索按钮的移动

由于我们希望搜索按钮会动起来，那么就涉及到一个问题，它应该相对于谁动？肯定是容器！所以我们首先要将容器的position设置为