CODEWITHSUNDEEP
javascripthtmlnode.jsangulartypescript
Engineer
Engineer

Reputation: 109

Angular Animation keeps restarting on every Action

I am trying to make a scaling animation on a list in an Angular project; however, what I need is that the animation will be triggered only when pressing certain buttons on the screen, (the red and green buttons as shown in the video).

Right now, no matter what I click on, the animation restarts, does anyone know what could be the issue?

TypeScript code:

  animations: [
    trigger('enableDisable', [
    state('void', style({
    transform: 'scaleY(0)'
  })),
    state('*', style({
    transform: 'scaleY(1)'
  })),
    transition('void => *', animate(200))
])

]

HTML Code:

  <div
    [@enableDisable]
    (click)="onSelect(item)" *ngFor="let item of itemList">
    <app-item-task [item]="item"></app-item-task>
  </div>

I uploaded a video which demonstrates the issue, sorry about the video quality, I had to lower it: Animation Issue Video

Thank you!

Upvotes: 0

Views: 116

Answers (1)

Andrei
Andrei

Reputation: 12036

add tracking function for your ngFor like this

*ngFor="let item of itemList; trackBy: trackById"

trackById(index, item) { 
  return item.id;
}

if you don't have anything specifying your item, you could try to return just index. when it is added then ngFor doesn't render new elements, but reuses the old ones, when it is not required

Upvotes: 1

Related Questions