使用Angular ngIf指令的CSS动画延迟

Question

我有一个带有ngIf指令的组件。

我希望当*ngIf为true时，呈现元素，但其延迟为200ms。

<app-kpi1
    [ngStyle]="{ transition: 'transform 400ms ease-out', 'transition-delay': '200ms' }"
    *ngIf="!isNavExpanded"
></app-kpi1>

我尝试使用ngStyle，但动画没有延迟地直接渲染

Answer 1

所需的属性称为动画延迟，如下例所示：

div {
  animation-delay: 2s;
}

参考文献：

https://www.w3schools.com/cssref/css3_pr_animation-delay.asp