可通过HTML5结合CSS3过渡动画和JavaScript状态控制实现搜索框折叠展开：一、CSS类切换配合transition；二、CSS自定义属性与toggleAttribute；三、@keyframes+transform缩放；四、details/summary原生标签；五、容器查询响应式控制。
如果需要在网页中实现搜索框的折叠与展开交互效果，可以通过HTML5结合CSS3过渡动画和JavaScript状态控制来完成。以下是实现此功能的多种方法：
一、使用CSS类切换配合transition动画
该方法通过为搜索框容器添加或移除CSS类，触发预设的height、opacity、padding等属性的过渡动画，实现平滑折叠展开效果。需预先定义折叠态与展开态的样式，并利用JavaScript控制类名变更。
1、在HTML中创建一个带搜索输入框的容器，设置初始class为search-box collapsed。
2、在CSS中定义.search-box基础样式，包括overflow: hidden和transition: height 0.3s ease, opacity 0.2s ease。
立即学习“前端免费学习笔记（深入）”；
3、定义.search-box.collapsed状态：设置height: 0、padding: 0、opacity: 0。
4、定义.search-box.expanded状态：设置height: auto（或固定高度如40px）、padding: 8px 12px、opacity: 1。
5、在JavaScript中绑定按钮点击事件，切换collapsed与expanded类名，并确保height从0到auto的过渡生效（可借助getBoundingClientRect()动态获取展开高度）。
二、使用CSS自定义属性与toggleAttribute控制
该方法利用HTML5的toggleAttribute操作data属性，配合CSS中的属性选择器和calc()函数驱动动画，避免硬编码高度值，增强可维护性。
1、在搜索框容器上添加data-expanded="false"初始属性。
2、在CSS中使用[data-expanded="false"]匹配折叠状态，设置height: 0、opacity: 0、padding: 0。
3、使用[data-expanded="true"]匹配展开状态，设置height: 40px、opacity: 1、padding: 8px 12px。
4、为容器添加transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)以启用缓动动画。
5、在JavaScript中调用element.toggleAttribute('data-expanded')切换属性，并监听变化更新视觉状态。
三、使用CSS @keyframes配合visibility与transform
该方法规避height: auto无法动画的问题，采用transform: scaleY()缩放与visibility控制显隐，确保动画流畅且不触发重排。
1、将搜索框包裹在独立容器内，设置overflow: hidden和transform-origin: top。
2、定义@keyframes expand：从transform: scaleY(0)到transform: scaleY(1)；定义@keyframes collapse：反向过程。
3、为展开状态添加animation: expand 0.28s forwards，为折叠状态添加animation: collapse 0.22s forwards。
4、在JavaScript中根据当前状态动态添加对应class（如is-expanding或is-collapsing），并在动画结束后移除临时类并更新visibility值。
5、关键点：必须在collapse动画结束时设置visibility: hidden，expand开始前设置visibility: visible，否则会出现闪烁。
四、使用HTML5 ails> 元素原生实现
该方法完全基于HTML5语义化标签，无需JavaScript即可实现折叠展开，兼容现代浏览器，适合轻量级场景。
1、用
2、在
3、在CSS中重置details summary的默认样式，移除list-style，设置cursor: pointer。
4、为details[open] .search-input设置显示样式，例如display: block；为未打开状态设置display: none。
5、若需动画效果，可对details[open] .search-input添加opacity和max-height过渡，但需注意
五、使用CSS容器查询与媒体查询响应式折叠
该方法依据视口宽度或父容器尺寸自动决定搜索框是否折叠，适用于响应式布局，符合HTML5响应式设计原则。
1、为搜索框容器设置container-type: inline-size启用容器查询。
2、编写容器查询规则：@container (max-width: 480px)下应用折叠样式（height: 0、opacity: 0）。
3、在宽屏条件下使用@container (min-width: 481px)启用展开样式（height: auto、opacity: 1）。
4、为折叠/展开切换按钮添加display: none在宽屏下，仅在窄屏下display: block。
5、关键点：必须为容器设置display: contents或具备layout能力的display值（如block），否则container-type无效。
