HTML下拉框添加过渡动效技巧

• 用 visibility: hidden + position: absolute 隐藏原生 <select>，只保留其表单语义和可访问性（如 name、value、required）
• 用 模拟下拉触发器，点击时切换一个 is-open 类
• 下拉菜单容器设 overflow: hidden，初始 height: 0，打开时设为 height: auto ——但注意：height: auto 无法过渡，得改用 max-height 配合固定上限值
• 推荐用 max-height + opacity + transform: scaleY() 组合实现更自然的缩放淡入效果

<div class="custom-select">
  &lt;select name=&quot;city&quot; id=&quot;city&quot; aria-hidden=&quot;true&quot;&gt;
    <option value="" disabled selected>请选择城市</option>
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
  &lt;/select&gt;

  <button type="button" aria-haspopup="listbox" aria-expanded="false">
    请选择城市
  </button>

  <ul role="listbox" aria-labelledby="city-button">
    <li role="option" data-value="bj">北京</li>
    <li role="option" data-value="sh">上海</li>
    <li role="option" data-value="gz">广州</li>
  </ul>
</div>

max-height 过渡的坑：别设 max-height: 0 → auto

CSS 不支持 auto 作为过渡起点或终点值，会导致过渡立即生效、无动画。必须用具体像素值（哪怕略大）替代 auto。

• 错误写法：max-height: 0; transition: max-height 0.25s; … &.open { max-height: auto; } → 无过渡
• 正确写法：max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; … &.open { max-height: 200px; }
• 200px 要大于所有选项总高度（含 padding/border），否则会截断；若选项动态增减，需 JS 重算并内联设置 max-height
• 更稳妥方案：用 opacity 和 transform: scaleY(0) → scaleY(1)，配合 transform-origin: top

无障碍与表单提交不能丢

自定义下拉容易忽略可访问性和表单集成，导致屏幕阅读器读不出、form.submit() 提交不到值。

• 原生 <select> 必须保留在 DOM 中、不设 display: none（可用 position: absolute; left: -9999px 移出视口）
• 用户选中
• 后，JS 必须同步更新 <select>.value 并触发 change 事件
• 按钮要加 aria-expanded，菜单加 role="listbox"，选项加 role="option" 和 aria-selected
• 键盘操作必须支持：Tab 进入、Space/Enter 展开、方向键高亮、Enter 确认、Escape 关闭

今天关于《HTML下拉框添加过渡动效技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！