原生 无法实现真正的下拉动画，因其 css 动画属性被浏览器强制忽略；必须改用 + 等语义化结构，通过 aria-expanded、transform: scaley() 和状态管理实现可控、可访问的动画效果。
原生 <select></select> 根本做不了真正的下拉展开动画——不是你代码写错，是浏览器根本不让动。
为什么 <select></select> 不能加 CSS 动画
Chrome、Safari、Firefox 都对原生 <select></select> 做了强限制：opacity、transform、transition 全部被忽略；display: none 切换会直接跳帧；@keyframes 在它身上基本等于没写。这不是兼容性问题，是设计使然。
- 连
height或max-height过渡都无效，因为原生下拉框的渲染层和 DOM 层不一致 - iOS 上尤其明显：点击后弹出系统级选择器，CSS 完全失焦
- 想用
aria-expanded或键盘导航？原生控件只认自己的逻辑，你插不进 JS 状态
用 <div>+<button>+<ul> 替代才是正解
<p>必须放弃 <code><select></select>，改用语义化但可完全控制的结构。关键不是“像不像”，而是“能不能接管状态”。
anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
-
<button></button> 作为触发器，绑定 aria-expanded 和 aria-controls
-
<ul></ul> 作为菜单容器，position: absolute + overflow: hidden
- 动画靠
opacity + transform: scaleY()，不用 height 或 max-height（后者需预设上限，易出错）
- 类名控制显隐，比如
.menu-open，JS 切换时加防抖或 isAnimating 锁
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<button></button> 作为触发器，绑定 aria-expanded 和 aria-controls
<ul></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" 得始终和视觉状态同步，差一帧都不行。
