CSS实现隐藏搜索框功能(动画正反向序列)

OStack程序员社区-中国程序员成长平台 › 门户 › 安全›安全教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

顶部菜单栏中放置搜索框是一个常见的场景，但如果搜索功能使用的不那么频繁，同时菜单栏中内容本来就比较拥挤，再放一个完整的搜索框在那就显得不那么美观。因此也有一个挺常见的做法是，只放一个搜索图标，需要时再显示整个搜索框，如下图所示：

实现思路

起始状态时搜索框没有显示，鼠标移入后从右侧滑入，因此不能使用搜索框自身的 hidden 或透明度属性，需要使用父元素的 overflow: hidden 将其隐藏，并把输入框移动到父元素的显示范围以外，需要时再移动回来。

CSS 中有 transition 和 animation 两种方式来实现动画效果，由于这里只有搜索框位置移动、图标透明度改变两个简单效果，用 transition 就足够了。

这两个动画本身实现很简单，但有一些小细节：

两个动画不是同时进行，而是有先后，需要使用 transition-delay 实现两个效果的序列
显示、隐藏两个过程好像完全一样，但仔细看会发现动画的顺序有不同：显示时图标先消失、搜索框后移入；隐藏时搜索框先移出、图标后出现。因此需要单独设置。

代码实现

完整的样式表附在文末，不想看具体思路的可以跳过本节直接去复制。

基础样式

先普普通通的写一下基础样式，这里用的图标是 material design icon。

<div class="search">
  <input class="bar" placeholder="请输入内容" />
  <span class="material-icons icon">search</span>
</div>
.icon {
  width: 24px;
  height: 24px;
}

.bar {
  height: 26px;
  width: 200px;
  padding: 1px 9px;
  border: #fff 1px solid;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
}
::placeholder {
  color: #ccc;	/* 修改input中placeholder的颜色*/
}

.search {
  height: 30px;
  display: flex;
  align-items: center;
}

隐藏搜索框

移动搜索框位置的方法有很多，比如可以使用 absolute 或者 relative 定位。

如果将搜索框设为 absolute 定位（position: absolute），搜索框会从输入流中抽出，通俗的说就是父元素在渲染时会当它不存在，这样父元素的宽度、搜索图标的位置都需要额外指定。
相比之下，relative 定位（position: relative）只是简单地移动元素的位置，对其他元素没有任何影响，在此处使用更加简单一些。

还有一种更直接的方法：transform 属性。通过这个属性，可以实现对元素的平移、旋转、缩放等变形操作，同时对其他元素不产生影响。在这里使用的 translateX() 属性就是将元素沿X轴（横向）平移指定距离。单从平移来说，各方面效果和使用 relative 定位没有明显区别。

PS: transition, transform, translate 这几个词不会只有我一直分不清吧555

.search {
  overflow: hidden;
}
.bar {
  transform: translateX(224px);
  /* 
    上一句也可以替换为下面两句，效果相同
    position: relative;
    left: 224px;
  */
}

动画序列

动画通过 transition 属性实现。transition 是 transition-property，transition-duration，transition-timing-function 和 transition-delay 四个属性的简写（类比border: red 1px solid;），四个属性分别指定了过渡动画的属性、持续时间、时间曲线、延迟时间。

属性即要应用过渡动画的属性
时间曲线是动画的速度变化，比如开始慢、中间快、结束慢，可以比匀速运动更好看更平滑
延迟时间即达到触发条件后延迟一段时间再触发动画，可以用来实现多个动画有先后顺序地执行

transition 属性本质上是小学电脑课学过的 flash 补间动画，指定一个属性的起止两个状态，自动补全中间的过渡动画。元素本来的属性是起始状态，鼠标移上后的动画，自然元素的 :hover 伪类属性是终止状态。

.icon {
  opacity: 1;
  transition: opacity 0.3s ease; /* delay 属性默认值为0 */
}
.search:hover .icon {
  opacity: 0;
}

.bar {
  transform: translateX(224px);
  transition: transform 0.3s ease-in-out 0.3s;
}
.search:hover .bar {
  transform: translateX(24px);
}

逆向序列

这样能够基本实现想要的动画效果了，但是在隐藏搜索框的时候也是图标先出现，搜索框后滑出，不够美观。解决方案也很简单，为 hover 伪类单独设置不同的 delay 属性即可。

有一点需要注意一下，hover 伪类中的 delay 属性对应的是鼠标移上时的延迟，元素本身属性中的 delay 对应的是鼠标移出时恢复动画的延迟。可能和第一反应不太一样（不过仔细想想倒也挺合理的），别写反了。

.icon {
  transition: opacity 0.3s ease 0.3s;
}

.search:hover .icon {
  transition-delay: 0s;
}

.bar {
  transition: transform 0.3s ease-in-out 0s;
}

.search:hover .bar {
  transition-delay: 0.3s;
}

触发区域

其实但就想要的动画效果，以上几步就足够了。但是这样还有一个小问题：动画是通过父元素 .search 的 hover 状态触发的，因此如果鼠标移入搜索图标左侧本来应该是搜索框的位置（但是现在什么也没有，被隐藏了），还是会触发显示搜索框动画。这其实也不是不能接受。

如果想只在鼠标悬停在图标时才触发动画，只要将触发条件改成 .icon 的悬停状态即可。不过由于 CSS 中只有后继元素选择器而没有前驱元素选择器（因为 DOM 渲染 CSS 的原则是不能出现回溯），需要调整一下 HTML 中图标和搜索框的顺序。

<div class="search">
  <span class="material-icons icon">search</span>
  <input class="bar" placeholder="请输入内容" />
</div>

然后修改相应的样式和选择器即可。

.icon:hover {
  opacity: 0;
  transition-delay: 0s;
}

.icon:hover + .bar {	/* + 紧邻兄弟选择器 */
  transform: translateX(24px);
  transition-delay: 0.3s;
}

.search {
  display: flex;
  flex-direction: row-reverse;	/* 让搜索框还在图标左边 */
}

附录：完整样式表

<div class="search">
  <span class="material-icons icon">search</span>
  <input class="bar" placeholder="请输入内容" />
</div>
.icon {
  width: 24px;
  height: 24px;
  opacity: 1;
  transition: opacity 0.3s ease 0.3s;
}

.icon:hover {
  opacity: 0;
  transition-delay: 0s;
}

.bar {
  height: 26px;
  width: 180px;
  padding: 1px 9px;
  border: #fff 1px solid;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
  transform: translateX(224px);
  transition: transform 0.3s ease-in-out 0s;
}

.icon:hover + .bar {
  transform: translateX(24px);
  transition-delay: 0.3s;
}

::placeholder {
  color: #ccc;
}

.search {
  height: 30px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  overflow: hidden;
}

到此这篇关于CSS实现隐藏搜索框功能(动画正反向序列)的文章就介绍到这了,更多相关css动画正反向序列内容请搜索极客世界以前的文章或继续浏览下面的相关文章，希望大家以后多多支持极客世界！

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

纯CSS3实现div按照顺序出入效果发布时间：2022-06-21

CSS实现两列布局的N种方法发布时间：2022-06-21

剪的笔顺,诠释剪的笔画,认识剪的部首

1 六六分期app的软件客服如何联系？(六六分期

六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期

阅读：19816|2023-10-27

2 可心卡盟:win10系统火狐flash插件崩溃怎么

今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知

阅读：10154|2022-11-06

3 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道

阅读：8423|2022-11-06

4 济南大学虚拟社区:鲁大师节能降温的具体办

今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要

阅读：8785|2022-11-06

5 xlueops.exe:无线网络安装向导

我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多

阅读：8740|2022-11-06

6 女斗合众国:win7系统cf与主机连接不稳定怎

今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不

阅读：9810|2022-11-06

7 0xc000022-[cf烟雾头]cf怎么调烟雾头

电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很

阅读：8727|2022-11-06

8 qizideyouhuo:应用程序无法正常启动0xc0000

我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法

阅读：8095|2022-11-06

9 ipz-185:win7系统vcf文件怎么打开

今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win

阅读：8771|2022-11-06

10 傻哥蹦迪:win10系统s4怎么打开usb调试

今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎

阅读：7613|2022-11-06

客服电话

电子邮件

CSS实现隐藏搜索框功能(动画正反向序列)

实现思路

代码实现

基础样式

隐藏搜索框

动画序列

逆向序列

触发区域

请发表评论

全部评论

上一篇：

下一篇：

krishnaik06/Machine-Learning-in-90-days

CVE-2022-37009

armancodv/building-energy-model-matlab:

美元符号为什么是“$”

FGRibreau/import-tweets-to-mastodon: How

剪的笔顺,诠释剪的笔画,认识剪的部首

六六分期app的软件客服如何联系？(六六分期

florent37/ViewAnimator: A fluent Android

florent37/Shrine-MaterialDesign2: implem

CVE-2020-36276

SimpleSoftwareIO/simple-sms: Send and re

关于我们

产品与服务

解决方案

139-2527-9053