HTML5搜索框展开效果可通过五种CSS+JS方案实现：一、width/opacity过渡；二、transform scale模拟；三、max-height垂直展开；四、CSS变量动态控制；五、状态锁防动画中断。
如果您希望在HTML5页面中实现搜索框点击后展开的效果，并配合平滑的动画与JavaScript控制逻辑，则需要结合CSS过渡效果与JS事件监听。以下是实现此功能的具体步骤：
一、使用CSS transition实现宽度变化动画
该方法通过监听搜索框父容器的类名切换，触发CSS中定义的width和opacity过渡效果，从而实现视觉上的展开收缩动画。需预先设定初始收缩状态（如宽度为32px）与展开状态（如宽度为200px），并启用transition属性平滑过渡。
1、在HTML中定义搜索框容器及输入框，结构如下：
2、在CSS中添加以下样式：
#search-container { display: inline-block; overflow: hidden; }
.search-collapsed { width: 32px; transition: width 0.3s ease, opacity 0.2s ease; }
.search-expanded { width: 200px; transition: width 0.3s ease, opacity 0.2s ease; }
#search-input { border: none; outline: none; background: transparent; width: 100%; }
立即学习“前端免费学习笔记（深入）”；
3、为搜索框容器绑定点击事件，切换类名：
document.getElementById('search-container').addEventListener('click', function() {
this.classList.toggle('search-collapsed');
this.classList.toggle('search-expanded');
});
二、使用CSS transform scale模拟展开感
该方法不改变元素实际宽度，而是利用scaleX缩放变换营造“从图标展开为输入框”的视觉效果，适合搭配搜索图标使用，动画更富表现力且不影响布局流。
1、HTML中嵌入搜索图标与隐藏输入框：
2、CSS中设置初始缩放与过渡：
#search-field { transform: scaleX(0); transform-origin: left center; opacity: 0; width: 180px; }
#search-trigger.active #search-field { transform: scaleX(1); opacity: 1; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; }
3、JS中添加激活逻辑：
const trigger = document.getElementById('search-trigger');
trigger.addEventListener('click', () => {
trigger.classList.add('active');
document.getElementById('search-field').focus();
});
三、使用max-height过渡实现高度方向展开
当搜索框需在垂直方向（如下拉式）展开时，可借助max-height从0到预设值的过渡实现动画。该方式兼容性较好，且避免了height:auto无法过渡的问题。
1、HTML结构采用包裹容器：
2、CSS中定义折叠/展开状态：
.dropdown-hidden { max-height: 0; overflow: hidden; transition: max-height 0.28s ease-out; }
.dropdown-shown { max-height: 60px; transition: max-height 0.32s ease-in; }
3、JS控制类名切换：
const toggleBtn = document.getElementById('search-toggle');
const dropdown = document.getElementById('search-dropdown');
toggleBtn.addEventListener('click', () => {
dropdown.classList.toggle('dropdown-hidden');
dropdown.classList.toggle('dropdown-shown');
});
四、使用CSS自定义属性与JS动态控制动画参数
该方法通过JavaScript修改CSS变量值，驱动transition响应变化，便于运行时调整动画时长、缓动函数或尺寸阈值，提升灵活性与复用性。
1、在:root中声明CSS变量：
:root { --search-width: 32px; --search-transition: 0.25s ease; }
2、搜索容器应用变量：
#search-advanced { width: var(--search-width); transition: width var(--search-transition); }
#search-advanced.expanded { --search-width: 240px; }
3、JS中更新变量并切换类：
const searchBox = document.getElementById('search-advanced');
searchBox.addEventListener('click', () => {
searchBox.style.setProperty('--search-transition', '0.3s cubic-bezier(0.22, 0.61, 0.36, 1)');
searchBox.classList.add('expanded');
});
五、阻止重复点击导致的动画中断与状态错乱
多次快速点击可能使transition未完成即触发反向变化，造成闪烁或卡顿。需引入状态锁机制，在动画进行中禁用交互，确保每次展开/收起动作完整执行。
1、定义锁变量与初始状态：
let isAnimating = false;
2、在点击处理函数开头加入判断：
if (isAnimating) return;
isAnimating = true;
3、使用transitionend事件释放锁：
searchElement.addEventListener('transitionend', () => {
isAnimating = false;
}, { once: true });
4、关键提示：务必为transitionend监听器添加{ once: true }选项，防止多次绑定导致锁无法释放
