html原生select不支持css动画显隐，必须用div+button+ul自定义组件才能实现；需用js控制is-open类、aria属性保障可访问性，并注意ios渲染异常、键盘导航及点击穿透等兼容性问题。
HTML下拉框本身不支持 CSS 动画显隐
直接对 <select></select> 元素使用 @keyframes + opacity 或 transform 做淡入/滑动，基本无效。浏览器对原生 <select></select> 的样式控制极弱，transition 和 animation 在多数引擎（尤其是 Chrome 和 Safari）中会被忽略，连 display: none 切换都会跳过动画帧。
真正可行的方案是用自定义下拉组件替代原生 select
必须放弃原生 <select></select>，改用 <div> + <code><button></button> + <ul></ul> 模拟，并手动控制显隐状态。此时才能自由应用 @keyframes 或 transition：
- 用
aria-expanded和aria-controls保证可访问性 - 下拉列表容器需设
position: absolute，并绑定opacity/transform动画 - 动画触发依赖 JS 控制类名（如
is-open），不能靠:hover或伪类 - 注意
height无法直接动画（因auto不可插值），应改用max-height或transform: scaleY()
@keyframes dropdownFadeIn {
from { opacity: 0; transform: scaleY(0.8); }
to { opacity: 1; transform: scaleY(1); }
}
.dropdown-menu {
opacity: 0;
transform: scaleY(0.8);
transform-origin: top;
transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.6, 0.4, 1);
}
.dropdown-menu.is-open {
opacity: 1;
transform: scaleY(1);
}
关键兼容性与易踩坑点
即使用了自定义结构，以下问题仍高频出现：
-
transform: scaleY()在 iOS Safari 下可能触发渲染异常，建议加backface-visibility: hidden - 若用
max-height实现高度过渡，需预估最大展开高度（如max-height: 200px），否则动画会卡顿或失效 - 键盘导航（
Tab、ArrowDown）必须手动实现，否则破坏可访问性 - 点击外部关闭菜单时，若用
document.addEventListener('click')，需排除下拉自身区域，否则一打开就关闭 - 动画结束前用户快速连续点击，容易导致类名冲突，建议加防抖或状态锁（如
isAnimating）
不推荐用 keyframes 做下拉动画的场景
当项目需支持旧版 IE（≤11）、或团队缺乏 JS 状态管理能力时，强行套 @keyframes 反而增加维护成本。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
transition配合opacity+transform（更可控、性能更好） - 禁用动画，仅用
visibility: hidden/visible保证功能可用 - 若必须用 keyframes，只用于入场效果（
animation-fill-mode: forwards），退出动画单独用 JS 移除类并监听animationend
setTimeout 调度和对 getBoundingClientRect() 的反复校准。
