Tengo una transición como se define a continuación, pero la transición vuelve a su estado predeterminado. Necesito que mi etiqueta div se deslice hacia la izquierda al aumentar y hacia la derecha al disminuir

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

Aquí está mi fragmento html

 <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>

y aquí está el GIF de lo que está pasando. Debería cambiar al siguiente trabajo, pero no lo es.