原生 <select> 无法实现真正的下拉动画，因其 CSS 动画属性被浏览器强制忽略；必须改用 <button>+<ul> 等语义化结构，通过 aria-expanded、transform: scaleY() 和状态管理实现可控、可访问的动画效果。
原生 <select> 根本做不了真正的下拉展开动画——不是你代码写错，是浏览器根本不让动。
为什么 <select> 不能加 CSS 动画
Chrome、Safari、Firefox 都对原生 <select> 做了强限制：opacity、transform、transition 全部被忽略；display: none 切换会直接跳帧；@keyframes 在它身上基本等于没写。这不是兼容性问题，是设计使然。
- 连
height或max-height过渡都无效，因为原生下拉框的渲染层和 DOM 层不一致 - iOS 上尤其明显：点击后弹出系统级选择器，CSS 完全失焦
- 想用
aria-expanded或键盘导航？原生控件只认自己的逻辑，你插不进 JS 状态
用 <div>+<button>+<ul> 替代才是正解
必须放弃 <select>，改用语义化但可完全控制的结构。关键不是“像不像”，而是“能不能接管状态”。
-
<button>作为触发器，绑定aria-expanded和aria-controls -
<ul>作为菜单容器，position: absolute+overflow: hidden - 动画靠
opacity+transform: scaleY()，不用height或max-height（后者需预设上限，易出错） - 类名控制显隐，比如
.menu-open，JS 切换时加防抖或isAnimating锁
示例核心 CSS：
立即学习“前端免费学习笔记（深入）”；
.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.menu-open {
opacity: 1;
transform: scaleY(1);
}
移动端和键盘交互不能漏
光有鼠标悬停或点击展开，不算完成。真实项目里这两点最容易上线后被投诉：
- iOS Safari 中
transform: scaleY()可能闪屏或卡顿，必须加backface-visibility: hidden - 按
Tab进入下拉按钮后，ArrowDown应自动聚焦第一个菜单项，Escape关闭菜单 - 点击外部关闭时，
document.addEventListener('click')必须用event.target.closest('.dropdown')排除自身区域，否则一打开就收起 - 快速连点导致类名冲突？别依赖 classList.toggle，改用状态变量 + 条件判断
真正难的不是写出动画，是让动画在各种设备、各种操作路径下都稳得住——尤其是用户用手指划、用键盘切、用屏幕阅读器读的时候，那个 aria-expanded="true" 得始终和视觉状态同步，差一帧都不行。
