css - Div css 过渡不会在切换时折叠

Question

我想切换此 div 以在单击时展开和折叠。展开的过渡有效，但是我不知道如何过渡折叠。我想使用 max-height 以便在我的 div 中包含动态(大或小)内容。

div.component.html

<div
[ngClass]="{'expand': divClass, 'collapse': !divClass}"
(click)="divClass = !divClass"
class="a">
</div>

div.component.css

.a {
    width: 400px;
    height: 100px;
    max-height: 100px;
    transition: max-height 1s;
}

.expand {
    background-color: red;
    height: 500px;
    max-height: 500px;
}

.collapse {
    background-color: red;
    max-height: 100px;
    height: 100px;
    transition: max-height 1s;
}

Answer 1

我只是将过渡更改为 transition-duration..just css 的东西

div.component.css

.a {
    width: 400px;
    height: 100px;
    max-height: 100px;
    transition-duration: 1s;
}

.expand {
    background-color: red;
    height: 500px;
    max-height: 500px;
}

.collapse {
    background-color: red;
    max-height: 100px;
    height: 100px;
    transition-duration: 1s;
}

这里是 Demo和 StackBlitz我 fork 显示它工作