CSS 条件 div 的高度动画仅适用于 div 显示

Question

我有多个使用 *ngIf 条件显示的嵌套 containers angular 块。

<button mat-raised-button color="primary" (click)="changeType()">Show/Hide type </button>
<div ngClass="{{type ? 'bloc-on' : 'bloc'}}">
  <ng-container *ngIf='type'>
    <p>
      {{type}}
      bla
      bla
      bla
    </p>
    <p>
      bla
      bla
      bla
    </p>
    <p>
      bla
      bla
      bla
    </p>
    <button mat-raised-button color="primary" (click)="changeCat()">Show/Hide cat </button>
    <div ngClass="{{cat ? 'bloc-on' : 'bloc'}}">
      <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>
    </div>
  </ng-container>
</div>
<p> Static bloc</p>

在CSS

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

实际上只有当第一个条件为 true 时才会执行动画，然后当 ngcontainers 为 false 时，动画不会发生

这里是a reproduction

Answer 1

检查我从你的例子中分叉出来的 Stackblitz：https://stackblitz.com/edit/angular-9-material-starter-eptgpv

问题是 *ngIf 立即删除元素，没有元素显示过渡。

相反，您可以简单地隐藏带有 CSS 的元素：

<div ngClass="{{type ? 'simulation-bloc-on' : 'simulation-bloc'}}">
  <div [class.hide]="!type">
    <div>
      <p>
        {{type}}
        bla

第二块：

    <div ngClass="{{cat ? 'simulation-bloc-on' : 'simulation-bloc'}}">
      <div [class.hide]="!cat || !type">
        <p>
          bla 2

CSS中的.hide class:

.hide {
  visibility: hidden;
}

Answer 2

当我们点击按钮时，没有元素显示过渡，它会立即被删除，因此过渡不起作用。

但在您的示例中，您的 <p> Static bloc</p> 落后于您的 div，因此请对 CSS 进行一些更改，您可以尝试使用它

  .simulation-bloc {
    max-height: 0px;
    transition: all 0.5s ease;
  }
  .simulation-bloc-on {
    max-height: max-content;
    transition: all 0.5s ease;
  }

谢谢:)

CSS 条件 div 的高度动画仅适用于 div 显示

CSS height animation of conditionnal div working only on div show

html

css

css-animations

angular