Блог

У меня есть переход, как определено ниже, но переход возвращается в состояние по умолчанию. Мне нужно, чтобы мой тег div скользил влево при увеличении и вправо при уменьшении

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

Вот мой html-фрагмент

 lt;figcaption class="image-overlay"gt;  lt;button (click)="onPrevious(image)" mat-icon-button class="slider-button prev" color="primary" [disabled]="image.index === 0"gt;lt;mat-icongt;navigate_beforelt;/mat-icongt;lt;/buttongt;  lt;div [@animSlider]="image.index" class="image-title-choices"gt;  lt;div *ngFor="let title of imageTitles; let i = index" class="image-title-choice-hold" fxLayout="row" fxLayoutAlign="center"gt;  lt;spangt;{{ title }}lt;/spangt;  lt;/divgt;  lt;/divgt;  lt;button (click)="onNext(image)" [disabled]="image.index === imageTitles.length" mat-icon-button class="slider-button next" color="primary"gt;lt;mat-icongt;navigate_nextlt;/mat-icongt;lt;/buttongt; lt;/figcaptiongt;  

и вот GIF того, что происходит. Он должен переключиться на следующую работу, но это не так.