Dropdown组件无法实现过渡动画，求代码问题排查

问题根源 #

你用display: none和display: block控制下拉列表的显示/隐藏，但CSS transition不支持display属性的过渡——该属性是瞬间切换状态，不会触发过渡动画，因此你配置的opacity、transform等过渡效果无法生效。

修复方案 #

替换display的切换逻辑，改用opacity、visibility和transform这些支持过渡的属性控制显示状态，保留原有过渡配置即可：

修改后的CSS代码

.dropdown-options {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 15em;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
  left: 0;
  top: calc(100% + 0.25em);
  z-index: 100;
  /* 初始隐藏状态：透明+不可见+向上偏移 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
  &.show {
    /* 显示状态：不透明+可见+复位位置 */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.dropdown-option {
  padding: 0.25em 0.5em;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease,
    padding-left 0.2s ease;
}

方案说明

• visibility: hidden让元素不可见但仍占据布局空间（区别于display:none），配合opacity:0实现完全隐藏的视觉效果
• transform: translateY(-10px)添加向上偏移的初始状态，展开时复位，让动画更自然
• 这三个属性均支持CSS transition，能触发预期的渐显+位移过渡效果

额外优化 #

若担心隐藏状态下的元素干扰点击，可给.dropdown-options添加pointer-events: none，并在.show类中重置为pointer-events: auto，这样隐藏时元素不会响应鼠标事件，交互效果和display:none一致。

内容的提问来源于stack exchange，提问作者TSDev