代码之家 › 专栏 › 技术社区 › physicsboy

Div是立即扩展的,而不是随着时间的推移?

angular-material animation angular css html

physicsboy · 技术社区 · 7 年前

我的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;
}

stackblitz

1 回复 | 直到 7 年前

SiddAjmera 7 年前

只需添加一个 height div.card 类的初始高度。

div.card.heightChange transition 只为 高度

将CSS类更改为:

div.card {
  background: white;
  padding: 12px;
  height: 25px;
  justify-items: center;
  transition: height 0.5s;
}

div.card.heightChange {
  height: 150px;
}

这里有一个 Working Sample StackBlitz