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>

See also this answer https://stackoverflow.com/a/50791299/16940 — Simon_Weaver, Apr 25 '22 at 03:32
Note: I was able to get the 'no-op' animation to work. I noticed you didn't actually apply it to the DIV above in your example. Need to add `
`. I did also notice that with both `[@blockInitialRenderAnimation]` and `[@.disabled]` the `(done)` handlers do run - so if that's doing something you want to prevent (such as scrolling the element into view) you'll need to find a different mechanism to stop it because not even `[@.disabled]` does — Simon_Weaver, Apr 25 '22 at 03:46

score 10 · Accepted Answer · answered Jun 16 '21 at 16:41

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

Angular: Disable animation on page load

1 Answers1