搜索框隐藏动画的实现｜8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

在 顶部菜单栏 中放置一个 搜索框是 非常常见的场景，但如果 顶部菜单栏 中内容本来就比较 拥挤，再放一个完整的搜索框在那就显得不那么美观。因此也有一个挺常见的做法是，只放一个搜索图标，需要时再显示整个搜索框这是一种常见的做法。这样不仅更 美观 而且 节约 非常多的展示空间，在有限的空间里展示了尽量多的东西，所以备受很多企业的 青睐 。

一、导入 Font Awesome 图标库

<script src="https://use.fontawesome.com/ab349f0a54.js" ></script>

二、添加 HTML

<form>
    <div class="search_box">
        <input class="search" type="text" name="search" placeholder="搜索...">
        <i class="fa fa-search fa-lg" aria-hidden="true"></i>
    </div>
</form>

三、添加 CSS

我们需要设置一个好看的搜索框 CSS 样式。

最外层的 .search_box 我们要设置 position: relative
里面的 .search 和 .fa-search设置为 position: absolute

对于 .search 搜索框样式

1. 把盒子模型设置成 box-sizing: border-box
2. 宽度设置成 width: 150px
3. 边框设置成 border: 5px solid #ccc
4. 现在网页都流行圆角设置，为了使风格一致，我们把圆角设置为 border-radius: 5px
5. 字体大小设置为 font-size: 16px
6. 背景颜色一般设置为和导航栏一样，这里我们设置为白色 background-color: white
7. 使文字与搜索图标对齐 padding: 12px 20px 12px 40px
8. 设置动画的变化速度 transition: width 0.4s ease-in-out
9. 兼容 Chrome 浏览器 -webkit-transition: width 0.4s ease-in-out 核心步骤 是搜索获得焦点时，把 width 属性设置为 100%

对于 .fa-search 搜索图标样式

1. 设置一个醒目的搜索图标，是为了告知用户这是搜索框
2. 搜索图标居中 top: 14px 和 left: 14px
3. 设置搜索图标颜色与搜索框提示文字颜色相同 color:#b2b2b2

.search_box{
    position: relative;
}

.search {
    width: 150px;
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    background-color: white;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

.search:focus {
    width: 100%;
}

.fa-search {
    position: absolute;
    top: 14px;
    left: 14px;
    color:#b2b2b2;
}

最终效果

添加 JS

如果我们还要实现类似 华为搜索框 的功能， 在展开搜索框时，使同一行的其他元素消失 那我们就要使用 JS 来操控 DOM。

实现这一功能很简单

1. 我们只需要在搜索框获得焦点时，为以下这两个红色框的元素添加一个 class="hidden_box"，这个 class 里面包含 visibility:hidden。
2. 在失去焦点时，删除 class = "hidden_box"。

新增 HTML 部分

<div class="nav_top">
    <text>首页</text>
    <text>开始</text>
    <text>手机</text>
    <text>平板</text>
    <text>笔记本电脑</text>
</div>

新增 CSS 部分

.nav_top {
    position: absolute;
    right: 20px;
    height: 46px;
    line-height: 46px;
}

.hidden_box {
    visibility: hidden;
}

JS 部分

document.querySelector(".search").addEventListener("focus",addClass);
document.querySelector(".search").addEventListener("blur",removeClass);

function addClass(){
    document.querySelector(".nav_top").classList.add("hidden_box")
}
function removeClass(){
    document.querySelector(".nav_top").classList.remove("hidden_box")
}   

最终效果

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。