如何为自定义 select 制作下拉 CSS 动画？

Question

我正在用 javascript 制作一个 custom select。问题是，我想让它在您单击 select 框时，选项应该下拉，而不仅仅是出现。

这个项目相当大（可能会小很多，但我正在尝试尽可能多地自己完成），所以我将只留下一点代码（如果您需要更多，请告诉我，我很乐意提供）。

下面是使选项出现的流程：

单击 select 框时，它会向包含使其成为 display: block;.

的选项的元素添加 CSS class

这里是select盒子本身的CSSclass：

.custom-select-outer-box {
    width: 100%; /* of its wrapper */
    padding: 4px;
    border: 1px solid black;
    user-select: none;
    position: relative;
    cursor: pointer;
}

这里是“选项”元素的代码：

.custom-select-options {
    position: absolute;
    display: none;
    margin: 0;
    padding: 0;
    border: 2px solid black;
    border-top: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}

最后，我在单击 select 框时添加的 CSS class：

.custom-select-show {
    display: block;
}

问题是我不希望它只是一个 display: block;，因为那样它就会出现。我想让它滑下来。

我试过制作一个 CSS 动画，它是这样的：

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-200px); /* this height brings it to the exact position for the drop down */
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

但是像这样添加时，下拉菜单甚至在下拉之前就可见。像 this.

我希望尽快得到答复，如果我遗漏了任何信息或不够清楚，请告诉我。

提前致谢。

Answer 1

不要使用 translateY，因为您更改了列表在屏幕上的位置。隐藏列表时，将高度设置为最小值或零，然后当用户单击按钮时，列表将“向下滚动”到定义的高度。

function myFunction() {
    document.getElementById("list-roll-down").classList.toggle("is-active");
}

#list-roll-down{
width: 200px;
height: 20px;
background-color: green;
opacity: 0.2;
  transition: all .4s;
}
#list-roll-down.is-active{
  height: 150px;
opacity:1;
}

<button onclick="myFunction()">Click</button>
<div id="list-roll-down"></div>

如何为自定义 select 制作下拉 CSS 动画？

How to make a dropdown CSS animation for custom select?

css

animation

select

drop-down-menu