Angular：禁用页面加载时的动画

Question

Angular 11。我有一个输入列表（每个输入都由一个 div 包装），能够使用反应式表单添加输入，因此每当用户单击按钮添加输入时，我都会将控件推送到输入数组。

我想要的行为是，每当用户动态添加输入时，它都会以动画显示，所以我编写了以下代码：

  animations: [
trigger('input', [
  state('in', style({ opacity: 1 })),
  transition(':enter', [
    animate(
      '.3s ease-in',
      keyframes([
        style({ opacity: 0 }),
        style({ opacity: 0.5 }),
        style({ opacity: 1 }),
      ])
    ),
  ]),
]),

]。

现在，它在添加新输入时起作用，但每当页面加载时动画也会触发，并且默认情况下，我在页面上有 3 个输入。

如何防止动画在页面加载时触发并仅在添加新输入时触发？

我尝试在父级（div）上添加无操作动画，但它不起作用。

    trigger(
        "blockInitialRenderAnimation",
        [
            transition( ":enter", [] )
        ]
    )

我的 HTML：

      <div
    *ngFor="let option of options.controls; let i = index"
    class="form-options"
  >
    <input
      type="text"
      placeholder="Add option {{ i + 1 }}"
      [formControlName]="i"
      (focus)="onOptionFocus(i)"
      [@input]="'in'"
    />
  </div>

Answer 1

您可以使用@.disabled绑定来禁用动画。将此特殊绑定放置在要禁用动画的元素上。然后在组件内定义 isDisabled 属性，然后在添加表单控件时将 isDisabled 设置为 true

组件.html

 <div [@.disabled]="isDisabled"
  *ngFor="let option of options.controls; let i = index"
  class="form-options" >
  <input
    type="text"
    placeholder="Add option {{ i + 1 }}"
    [formControlName]="i"
    (focus)="onOptionFocus(i)"
    [@input]="'in'"
  />
</div>

组件.ts

export class SomeClass{
 isDisabled = true;

 addControl(){
  this.isDisabled = false;
  ....
 }
}