原生HTML下拉框不支持CSS transition，因其展开行为由系统控件控制；需用自定义组件模拟，通过max-height/opacity/transform实现过渡，并确保可访问性与表单语义。
HTML 下拉框本身不支持 transition
直接给 元素加 transition: all 0.3s 是无效的——浏览器对原生 的渲染高度、展开/收起行为完全由操作系统控件接管，CSS 过渡无法作用于其“下拉展开”这一状态变化。你看到的所谓“动效”，其实是浏览器或系统级菜单弹出，不属于 CSS 动画控制范围。
想实现柔化下拉效果，必须用自定义下拉组件
核心思路：隐藏原生 CSS 不支持 自定义下拉容易忽略可访问性和表单集成，导致屏幕阅读器读不出、 立即学习“前端免费学习笔记（深入）”；，用 模拟选项列表，并控制其 height 或 opacity + transform 实现过渡。
visibility: hidden + position: absolute 隐藏原生 ，只保留其表单语义和可访问性（如 name、value、required） 模拟下拉触发器，点击时切换一个 is-open 类overflow: hidden，初始 height: 0，打开时设为 height: auto ——但注意：height: auto 无法过渡，得改用 max-height 配合固定上限值max-height + opacity + transform: scaleY() 组合实现更自然的缩放淡入效果
max-height 过渡的坑：别设 max-height: 0 → auto
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; }
max-height
opacity 和 transform: scaleY(0) → scaleY(1)，配合 transform-origin: top
无障碍与表单提交不能丢
form.submit() 提交不到值。
真实项目里，过渡是否“柔化”不是重点，重点是它是否稳定响应、是否在 Safari/旧 Edge 下不崩、是否能让盲人用户顺畅操作。多数情况下，用 必须保留在 DOM 中、不设 display: none（可用 position: absolute; left: -9999px 移出视口） 后，JS 必须同步更新 并触发 change 事件aria-expanded，菜单加 role="listbox"，选项加 role="option" 和 aria-selected
scaleY + opacity 比死磕 max-height 更省心，也更容易兼顾性能和语义。
