仅在 div show 上工作的条件 div 的 CSS 高度动画答案

【问题标题】：CSS height animation of conditionnal div working only on div show仅在 div show 上工作的条件 div 的 CSS 高度动画
【发布时间】：2021-08-20 15:06:23
【问题描述】：

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

<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

【问题讨论】：

如果你想使用 jQuery codepen.io/dgwyer/pen/xyNdNb

标签： html css angular css-animations

【解决方案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 类：

.hide {
  visibility: hidden;
}

【讨论】：

【解决方案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;
  }

谢谢你:)

【讨论】：