我有多个嵌套的containers角块，使用*ngif条件显示。

<button mat-raised-button color="primary" (click)="changeType()">change type </button>
  <div ngClass="{{type ? 'simulation-bloc-on' : 'simulation-bloc'}}">
    <ng-container *ngIf="type">
      <p>
        bla
        bla
        bla
      </p>
      <p>
        bla
        bla
        bla
      </p>
      <p>
        bla
        bla
        bla
      </p>
      <button mat-raised-button color="primary" (click)="changeCat()">change cat </button>

      <ng-container *ngIf="cat">
        <p>
          bla 2
          bla 2
          bla 2
        </p>
        <p>
          bla 2
          bla 2
          bla 2
        </p>
        <p>
          bla 2
          bla 2
          bla 2
        </p> 
      </ng-container>
    </ng-container>
  </div>
  <p> Static bloc</p>

在CSS中

.simulation-bloc {
  max-height: 0px;
  visibility: 'hidden';
  transition: max-height 500ms ease-in;
}
.simulation-bloc-on {
  max-height: 1000px;
  visibility: 'visible';
  transition: max-height 500ms ease-in;
}

实际上，只有当个条件为true时才执行动画，然后当子容器为true时，不触发高度动画。

如何只用CSS而不使用角度动画来完成此操作？

这是一个复制品

顺晟科技：