时间戳

首页 > 解决方案 > Div 是立即扩展而不是随着时间的推移？

html - Div 是立即扩展而不是随着时间的推移？

问题描述

单击触发器后，我的 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;
}

堆栈闪电战

标签： htmlcssangularanimationangular-material

解决方案

只需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;
}

这是您参考的工作示例 StackBlitz。

推荐阅读