我的 div 在点击我的触发器后立即展开,而不是随着时间的推移发生......这是为什么,我该如何解决?
html
<div class="card" #panel [ngClass]="{heightChange: panel.isExpanded}">
<div class="header">
<div class="itemName">Some text goes here</div>
<mat-icon *ngIf="!panel.isExpanded" (click)="panel.isExpanded=true">edit</mat-icon>
<mat-icon *ngIf="panel.isExpanded" (click)="panel.isExpanded=false">cancel</mat-icon>
</div>
</div>
CSS
div.card {
background: white;
padding: 12px;
justify-items: center;
transition: all 0.5s;
}
mat-icon {
cursor: pointer;
}
div.header {
display: flex;
justify-content: space-between;
}
.heightChange {
height: 150px;
}
最佳答案
只需将 height
属性添加到您的 div.card
类中作为初始高度。
然后添加另一个名为 div.card.heightChange
的新高度类。 transition
仅适用于 height
而不是所有。
将您的 CSS 类更改为:
div.card {
background: white;
padding: 12px;
height: 25px;
justify-items: center;
transition: height 0.5s;
}
div.card.heightChange {
height: 150px;
}
这是一个 Working Sample StackBlitz供您引用。
关于html - Div 是立即扩展而不是随时间扩展?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53636153/