Переход Div CSS не разрушается при переключении

Question

Я хочу переключить этот div, чтобы развернуться и свернуться при клике. Переход для расширения работает, однако я не могу понять, как перенести крах. Я хотел бы использовать максимальную высоту, чтобы иметь динамический (большой или маленький) контент внутри моего 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

Я только что изменил переход на длительность перехода .. просто 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;
}

А вот Демо и StackBlitz Я разветвил, показывая, что он работает