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

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

实现思路

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

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

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

两个动画不是同时进行，而是有先后，需要使用 transition-delay 实现两个效果的序列

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

代码实现

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

基础样式

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