Search code examples
angularanimationangular-animations

Problem with Angular Animation using query selector

I'm trying to use query to only animate certain elements that have the class mentioned in the query selector.

This is what the relevant code looks like:

animations: [
  trigger('fade', [
    transition('void => active', 
      query('.animation-active', [
        animate('0.5s', keyframes([
          style({ opacity: 0.25 }),
          style({ opacity: 1 })
        ]))
      ])
    )
  ])
],

animationFields = ['animate']

values = ['animate', 'not animate']

<div
  *ngFor="let value of values"
  [ngClass]="{ 'animation-active': animationFields.includes(value) }"
  [@fade]="'active'"
> {{value}} </div>

Before I've tried using query it was working perfectly fine, the problem is that it was applying to all fields that had the [@fade]="'active'" line in the HTML, and I only want to animate where I have the ngClass adds my 'animation-active' class.

Thanks in advance.

Edit: stackblitz with the prepared code:

https://stackblitz.com/edit/angular-ivy-tzwwtb?file=src%2Fapp%2Fapp.component.ts

Solution

  • I've decided that instead of using a trigger passing the animation to every single member of values, I'd be better off creating an angular directive for it.

    It solves all of the problems mentioned above by having the directive animate the host component, which also solves all of the performance issues that I had.