如何为自定义select组件实现CSS下拉展开动画效果？

自定义选择器平滑下拉解决方案 #

核心问题是display属性不支持CSS过渡，切换display: block时元素会立即渲染可见，导致动画还未执行就先出现元素，可通过可过渡的max-height、opacity、visibility属性实现平滑下拉效果，该方案无需修改你现有的JS交互逻辑，还是沿用点击添加/移除custom-select-show类的逻辑即可，修改后的CSS代码如下：

1. 调整选项列表基础样式

.custom-select-options {
    position: absolute;
    /* 移除原有display: none配置，改用可过渡属性控制显隐 */
    margin: 0;
    padding: 0;
    border: 2px solid black;
    border-top: 0;
    width: 100%;
    left: 0; /* 新增，确保选项和选择框左对齐 */
    box-sizing: border-box; /* 新增，避免边框导致宽度溢出 */
    max-height: 0; /* 初始高度为0 */
    overflow-y: hidden; /* 初始隐藏溢出内容 */
    opacity: 0; /* 初始透明 */
    visibility: hidden; /* 初始不可交互 */
    transform: translateY(-10px); /* 初始向上偏移小段距离增强效果 */
    transition: all 0.3s ease; /* 所有属性0.3秒平滑过渡 */
    transform-origin: top center; /* 从顶部开始展开 */
    z-index: 99; /* 防止被其他元素遮挡 */
}
/* 展开后再允许纵向滚动，避免展开过程中提前出现滚动条 */
.custom-select-options.custom-select-show {
    overflow-y: auto;
}

2. 调整激活类样式

.custom-select-show {
    /* 移除原有display: block配置 */
    max-height: 210px; /* 略大于你设置的最大高度200px即可 */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

如果要保留你原来的keyframes动画方案，也可以通过给激活类添加10ms以内的动画延迟，同时给选项列表初始状态加visibility: hidden的方式解决提前可见问题，上述transition方案更简洁，性能也更优。

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