直接给select加transition无效，因其为操作系统级控件，不支持css动画；可用details+summary实现语义化可动画下拉，通过max-height或transform:scaley过渡，并注意pointer-events、tabindex及z-index等细节。

为什么直接给 select 加 transition 没用

因为原生 <select></select> 是操作系统级控件，浏览器禁止对其内部高度、子元素或伪类（如 ::after）做 CSS 动画控制。你加了 transition: height 0.3s，它根本不会响应——不是写错了，是压根不支持。

用 details + summary 实现语义化且可动画的下拉

这是目前最轻量、无需 JS、完全 CSS 驱动的方案，兼容 Chrome 12+、Firefox 49+、Safari 15.4+。关键在于利用 details[open] 的状态切换触发过渡：

<details class="dropdown"><summary>请选择</summary><ul class="dropdown-menu">
<li>选项一</li>
    <li>选项二</li>
  </ul></details>

配合以下 CSS 即可实现展开/收起的平滑高度过渡与阴影：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• summary 需设 list-style: none 去掉默认箭头，再用 ::after 自定义图标
• .dropdown-menu 初始设 max-height: 0、overflow: hidden，开时设为具体值（如 max-height: 200px），再配 transition: max-height 0.25s ease-in-out, box-shadow 0.2s
• 阴影不能直接过渡 box-shadow（会闪烁），改用 filter: drop-shadow() 更稳定

transform: scaleY() 替代 height 过渡更可靠

当菜单项数量不确定、无法预估最大高度时，max-height 容易溢出或留白。此时用 scaleY 更安全：

• 给 .dropdown-menu 设 transform-origin: top
• details:not([open]) .dropdown-menu → transform: scaleY(0)
• details[open] .dropdown-menu → transform: scaleY(1)
• 搭配 transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1)，比线性更自然
• 注意：需额外设 opacity: 0 / 1 配合，避免缩放过程中文字糊边

移动端点击穿透与焦点管理容易被忽略

在 iOS Safari 或部分安卓 WebView 中，details 展开后点击菜单项可能失效，原因有二：

• 原生 summary 默认阻止了 pointer-events 向下传递，需显式加 summary { pointer-events: auto; }
• 菜单项没设 tabindex="0"，键盘用户无法聚焦；若要支持无障碍，每个 <li> 应包一层 <button type="button"></button> 并禁用默认样式
• 阴影层级（z-index）必须高于相邻元素，否则在固定定位容器里会被裁切——别只信视觉稿，真机调试时多检查层叠上下文

真正难的不是写出过渡效果，而是让缩放、阴影、焦点、语义、可访问性全在线上同时成立。每多一个约束，就少一种“看起来能用”的取巧方式。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！