Div css过渡在切换时没有折叠答案

【问题标题】：Div css transition not collapsing on toggleDiv css过渡在切换时没有折叠
【发布时间】：2018-10-14 04:40:51
【问题描述】：

我想切换此 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;
}

【问题讨论】：

让你成为 StackBlitz link 我假设你希望崩溃慢一点吧？
@BSchnitzel 在您的示例中仍然没有折叠过渡
还没解决，只是让你在这里使用。尝试编辑您的主要帖子并添加它。然后其他人将分叉并尝试提供帮助。祝你好运！

标签： css angular animation

【解决方案1】：

我只是将过渡更改为过渡持续时间..只是 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 我分叉显示它工作

【讨论】：

嗯，我想知道为什么会这样。确实很奇怪 - 谢谢！