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

原文 标签 css angular animation

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

最佳答案

我只是将过渡更改为过渡持续时间..只是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;
}


这是DemoStackBlitz我分叉显示它的工作原理

关于css - Div CSS过渡不会在切换时崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50162283/

相关文章:

javascript - 在中心滚动图像并在中心缩放

android - 3D 旋转 - 透视

javascript - 在同一页面上打开外部链接作为覆盖

javascript - 创建一个Div,它的子元素是Javascript中的图像

html - 如何在放置在表格中的输入失去焦点时触发 "focusout"事件?

angular - 处理 Tab 事件

angular - Angular 2 和 4 中的 ARIA 可访问性

javascript - 两个预构建的 jQuery 动画序列都完成后,如何与单个回调并行运行?

javascript - 无需滚动的Wordpress Jquery动画

css - div在AJAX调用后不换行