Угловая анимация.Сдвиньте влево / вправо из существующего положения

Question

Я создаю горизонтальный скроллер, который перемещает 6 делений слева направо.Поэтому, если пользователь нажимает «влево», левая позиция меняется с 0 на -1000, а «правая» с 0 на 1000. Поэтому я сохраняю переменную в своем компоненте «leftPos», чтобы отслеживать ее, но по какой-то причине оберткане двигается.

@Component({
 selector: 'app-library',
 templateUrl: './library.component.html',
 styleUrls: ['./library.component.css'],
animations: [
    trigger('leftRight', [
        // ...
        state('left', style({
            left: '{{leftPos}}px'
        }), { params: {leftPos: '0'}}),
        state('right', style({
            left: '{{leftPos}}px'
        }), { params: {leftPos: '0'}}),
        transition('left <=> right', [
            animate('0.5s')
        ]),
    ]),
]
})

...

moveLeft() {
  this.leftPos += 100;
  this.isLeft = true;
}

moveRight() {
  this.leftPos -= 100;
  this.isLeft = false;
}

component.html

<div class="libraryWrapper" [@leftRight]="isLeft ? 'left' : 'right'">
<div class="bookWrapper" *ngFor="let book of books">
    <app-book [bookdata]="book"></app-book>
</div>
</div>
<div style="clear:both"></div>
<div class="pageLeft" (click)="moveLeft()"><img src="../assets/images/arrowLeft.png" alt="Left arrow"></div>
<div class="pageRight" (click)="moveRight()"><img src="../assets/images/arrowRight.png" alt="right arrow"></div>