Angular: Disable animation on page load

Question

Angular 11. I have a list of inputs (wrapped by a div, each.) with the ability to add an input using reactive forms, so whenever the user clicks a button to add an input, I push a control to the inputs array.

The behavior I want is that whenever the user dynamically adds an input, it will show with an animation, so I wrote this code:

  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 }),
      ])
    ),
  ]),
]),

].

Now, it works when adding a new input, but the animation also fires whenever the page loads, and by default, I have 3 inputs on the page.

How can I prevent the animation from firing on page load and to only happen whenever a new input is added?

I've tried adding a no-op animation on the parent (div), but it doesn't work.

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

my 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

You can use disable animation using @.disabled binding. place this special binding on that element you want to disable animation. Then define isDisabled property inside your component then set isDisabled to true when you add form control

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;
  ....
 }
}