Can't disable angular animation

Question

I have an animation that make an item in a liste slide on the right and go away.

export const flyOut = trigger('flyOut', [
  transition(':leave', [
    animate(300, style({
      transform: 'translate3d(100%, 0, 0)',
    })),
  ])
]);

I want to disable it conditionally, but i can't event to disable it.

on my component i do this, after injecting in @Component decorator the animations: [flyOut]

  <my-component *ngFor="let element of myObservable$ | async"
                @flyOut
                [@.disabled]="true"
      ></my-component>

The annimation won't disable. I've tried to put it on a div, use the parent, to use hostBiding etc ... Am i missing something?

Answer 1

try adding the [@.disabled]="true" in the parent div and @flyOut animation in child div

   <div [@.disabled]="true"> 
    <my-component @flyOut>
    </my-component>
   </div>