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 stuff

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我分叉显示它正常工作

Div css过渡不会在切换时崩溃

1 个答案: