Prevent angular animation when switching route

Question

I have an array of object that I want to animate on delete :

<div [@arrayAnim]="motives.length">
    <div class="motive" *ngFor="let motive of motives"><div>
    <div class="motive-name">{{motive.name}}</div>
    ...

    <mat-icon class="delete-icon" (click)="deleteMotive(motive)">delete</mat-icon>
</div>

In my component animations I built an array animation trigger as follow :

@Component({
  selector: 'app-motives',
  templateUrl: './motives.component.html',
  styleUrls: ['./motives.component.scss'],
  animations: [
    trigger('arrayAnim', [
      transition('* => *', [
        query(':leave', stagger('300ms', [
          animate('500ms ease-out', keyframes([
            style({opacity: 1, transform: 'scale(1.1)', offset:0}),
            style({opacity: .5, transform: 'scale(.5)', offset: .3}),
            style({opacity: 0, transform: 'scale(0)', offset:1})
          ]) )
        ]), {optional: true})
      ])
    ])
  ]
})

When siwtching route, the transition is triggered even though I'm not deleting any element of the array. I don't understand this behavior. Why is the animation triggered on route change ?

I have created a minimal example on stackblitz :

https://stackblitz.com/edit/angular-ivy-wdyzlh?file=src/app/prices/prices.component.ts

Switching from prices to products to prices routes will trigger the unexpected behavior. Deleting a price will work as expected.

Update

As suggested in the comment I can wrap the arrayAnim div within another one that would disable animations based on a component variable.

<div [@.disabled]="noAnimation">
    <div [@arrayAnim]="motives.length" (@arrayAnim.done)="onAnimationDone()">
        <div class="motive" *ngFor="let motive of motives"><div>
        <div class="motive-name">{{motive.name}}</div>
        ...

        <mat-icon class="delete-icon" (click)="deleteMotive(motive)">delete</mat-icon>
    </div>
</div>

In my component I'd have a noAnimation property that would be switched to true once the deletion is done. The no animation property would be set to false when triggering deleteMotive() method

angularQuestions angularQuestions · Accepted Answer · 2020-10-11T19:17:03

Try this:

<div [@.disabled]="noAnimation">
  <div [@arrayAnim]="priceArray.length">
    <div *ngFor="let p of priceArray" class="price" (click)="deletePrice(p)">
      Regular: {{p.regular}}
      Discounted: {{p.discounted}}
    </div>
  </div>
</div>
<p>Click on a price to delete it</p>

Component.ts:

  noAnimation = true;

  deletePrice(p) {
    this.noAnimation = false;
    this.priceArray = this.priceArray.filter(price => price != p);

    //After animiation was executed - disable it again

    setTimeout(()=> {
      this.noAnimation = true;
    }, 500);
  }

Prevent angular animation when switching route

1 Answers