Angular transition reverting to default state

Question

I have a transition as defined below but the transition goes back to it's default state. I need my div tag to slide left on increment and slide right on decrement

animations: [
    trigger('animSlider', [
      transition(':decrement', [
        animate('300ms ease-out', style({ transform: 'translateX(200px)' }))
      ]),
      transition(':increment', [
        animate('300ms ease-out', style({ transform: 'translateX(-200px)' })),
      ]),
    ]),
  ]

Here's my html snippet

<figcaption class="image-overlay">
  <button (click)="onPrevious(image)" mat-icon-button class="slider-button prev" color="primary" [disabled]="image.index === 0"><mat-icon>navigate_before</mat-icon></button>
  <div [@animSlider]="image.index" class="image-title-choices">
    <div *ngFor="let title of imageTitles; let i = index"  class="image-title-choice-hold" fxLayout="row" fxLayoutAlign="center">
      <span>{{ title }}</span>
    </div>
  </div>
  <button (click)="onNext(image)" [disabled]="image.index === imageTitles.length" mat-icon-button class="slider-button next" color="primary"><mat-icon>navigate_next</mat-icon></button>
</figcaption>

and here is GIF of what is happening. It should switching to the next work, but it is not.