原生HTML下拉框不支持CSS transition，因其展开行为由系统控件控制；需用自定义组件模拟，通过max-height/opacity/transform实现过渡，并确保可访问性与表单语义。
HTML 下拉框本身不支持 transition
直接给 <select></select> 元素加 transition: all 0.3s 是无效的——浏览器对原生 <select></select> 的渲染高度、展开/收起行为完全由操作系统控件接管，CSS 过渡无法作用于其“下拉展开”这一状态变化。你看到的所谓“动效”，其实是浏览器或系统级菜单弹出，不属于 CSS 动画控制范围。
想实现柔化下拉效果，必须用自定义下拉组件
核心思路：隐藏原生 <select></select>，用 <div> + <code><ul></ul> + <li> 模拟选项列表，并控制其 height 或 opacity + transform 实现过渡。
- 用
visibility: hidden+position: absolute隐藏原生<select></select>，只保留其表单语义和可访问性（如name、value、required） - 用
<button></button>模拟下拉触发器，点击时切换一个is-open类 - 下拉菜单容器设
overflow: hidden，初始height: 0，打开时设为height: auto——但注意：height: auto无法过渡，得改用max-height配合固定上限值 - 推荐用
max-height+opacity+transform: scaleY()组合实现更自然的缩放淡入效果
<div class="custom-select">
<select name="city" id="city" aria-hidden="true">
<option value="" disabled selected>请选择城市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<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></select>必须保留在 DOM 中、不设display: none（可用position: absolute; left: -9999px移出视口） - 用户选中
<li>后，JS 必须同步更新<select>.value</select>并触发change事件 - 按钮要加
aria-expanded，菜单加role="listbox"，选项加role="option"和aria-selected - 键盘操作必须支持：Tab 进入、Space/Enter 展开、方向键高亮、Enter 确认、Escape 关闭
scaleY + opacity 比死磕 max-height 更省心，也更容易兼顾性能和语义。
