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


Posted in HTML / CSS onJuly 21, 2021

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

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

实现思路

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

CSS 中有 transitionanimation 两种方式来实现动画效果,由于这里只有搜索框位置移动、图标透明度改变两个简单效果,用 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;
}

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

隐藏搜索框

移动搜索框位置的方法有很多,比如可以使用 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动画正反向序列内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
html5实现点击弹出图片功能
Jul 16 #HTML / CSS
纯CSS3实现div按照顺序出入效果
CSS3中Animation实现简单的手指点击动画的示例
详解CSS中的特指度和层叠问题
Jul 15 #HTML / CSS
html form表单基础入门案例讲解
html+css实现环绕倒影加载特效
You might like
PHP学习之数组的定义和填充
2011/04/17 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
浅谈python数据类型及类型转换
2017/12/18 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python如何求圆的面积
2020/07/01 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
学习交流会主持词
2014/04/01 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
法务专员岗位职责
2015/02/14 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书