css 动画延迟 Angular ngIf 指令

Question

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

我会在 *ngIf 为真时渲染元素，但 delay 为 200 毫秒。

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

我试过 ngStyle 但动画直接渲染没有延迟

Answer 1

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

div {
  animation-delay: 2s;
}

参考文献：

css animation delay with Angular ngIf directive