Angular animate if condition is met

Question

I have an animation in an angular application

@Component({
  selector: 'app-portfolio',
  templateUrl: 'portfolio.page.html',
  styleUrls: ['portfolio.page.scss'],
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

However there are two elements in the same position that use it, and they can't be on the screen at the same time. So if I select to show the one element, then the other element will automatically hide. The problem is I just want the element to animate out if the other element isnt being animated in. Is there a way to only show the animation if a condition has been met? Something like this?

  <ion-item color="primary" (element2open === false)=[@slideInOut] *ngIf="openElement1" lines="none">
  </ion-item>
  <ion-item color="primary" (element1open === false)=[@slideInOut] *ngIf="openElement2" lines="none">
  </ion-item>

Answer 1

Solution 1:

You can disable animations using:

  @HostBinding('@.disabled')
  public animationsDisabled = false;

This set to your component the css class: ng-animate-disabled

See an example here toggling the checkbox "Toggle All Animations"

Solution 2: To avoid animations in and out at the same time, you can use sequence() to run animations in given order.

trigger('slideInOut', [
  transition('* => *', [
    sequence([
      query(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ], {optional: true}),
      query(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ], {optional: true})
    ])
  ])
])

This will run first animations enter and second animations leave. Change the order in the array if you want the other way round sequence.

Make sure you annotate the parent with @slideInOut , not the item element.

<parent @slideInOut>
  <ion-item color="primary"  *ngIf="openElement1" lines="none">
  </ion-item>
  <ion-item color="primary" *ngIf="openElement2" lines="none">
  </ion-item>
</parent>