css 线性过渡 属性 不服从

Question

我想在盒子的高度上做线性过渡。我写了以下 css 来实现这一点。但转变是突然的。高度突然增加，然后边距一直在占用。为什么会这样？有人可以帮我解决吗？

.resource .resource-item-list .resource-item{
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: all 3s linear;
    transition: all 3s linear;
}


.resource .resource-item-list .resource-item.open{
    width: 100%;
    height: auto;
    max-height: 10000px;
    margin-bottom: 30px;
    margin-top: 20px;
    background-color: red;
    overflow: hidden;
    display: block;

}

Answer 1

实际上它在工作，但它从 0 max-height 跳到 10000px。

过渡确实在 3 秒内发生，但您只能看到 10000（容器高度）中的前 100-200px，这需要您设置的 3 秒中的大约 0.03 秒。

不幸的是，我认为只有 CSS 的动态高度容器不可能实现平滑的固定时间过渡。