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

component.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>

component.ts

export class SomeClass{
 isDisabled = true;

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

Angular: 在页面加载时禁用动画

Angular: Disable animation on page load

animation

angular