HTML原生select不支持CSS动画显隐，必须用div+button+ul自定义组件才能实现；需用JS控制is-open类、aria属性保障可访问性，并注意iOS渲染异常、键盘导航及点击穿透等兼容性问题。
HTML下拉框本身不支持 CSS 动画显隐
直接对 元素使用 @keyframes + opacity 或 transform 做淡入/滑动，基本无效。浏览器对原生 的样式控制极弱，transition 和 animation 在多数引擎（尤其是 Chrome 和 Safari）中会被忽略，连 display: none 切换都会跳过动画帧。
真正可行的方案是用自定义下拉组件替代原生 select
必须放弃原生 即使用了自定义结构，以下问题仍高频出现： 当项目需支持旧版 IE（≤11）、或团队缺乏 JS 状态管理能力时，强行套 立即学习“前端免费学习笔记（深入）”；，改用 + @keyframes 或 transition：
aria-expanded 和 aria-controls 保证可访问性position: absolute，并绑定 opacity / transform 动画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 做下拉动画的场景
@keyframes 反而增加维护成本。更稳妥的做法是：
真实动效体验的关键不在“有没有 keyframes”，而在于动画是否与交互节奏同步、是否在视觉反馈和性能之间取得平衡。很多看似流畅的下拉动画，背后其实是精确到毫秒的 transition 配合 opacity + transform（更可控、性能更好）visibility: hidden / visible 保证功能可用animation-fill-mode: forwards），退出动画单独用 JS 移除类并监听 animationend
setTimeout 调度和对 getBoundingClientRect() 的反复校准。
