html - 使用 Angular ngIf 指令的 css 动画延迟

Question

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

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

<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