角度动画。从现有位置向左/向右滑动

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>