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

Question

I have a component with ngIf directive. 我有一个带有ngIf指令的组件。

I would that when *ngIf is true render the element but with a delay of 200ms. 我希望当*ngIf为true时呈现元素，但要延迟 200ms。

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

I tried with ngStyle but animation is rendered directly without a delay 我尝试使用ngStyle但是动画没有延迟就直接渲染

Answer 1

The property that you want is called an animated delay as in the example below: 所需的属性称为动画延迟，如以下示例所示：

div {
  animation-delay: 2s;
}

References: 参考文献：