相关疑难解决方法(0)

我正在创建一个可滑动到下一个或上一个全屏页面的分页组件。由于不同的浏览器和设备存在问题，因此我暂时不再使用CSS过渡。我有一个有效的角度动画解决方案，但是新问题是它无法缩放。

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('slideTransition', [
      state('firstPage', style({ transform: 'translateX(0)' })),
      state('secondPage', style({ transform: 'translateX(-100%)' })),
      transition('firstPage=>secondPage', animate('0.6s ease')),
      transition('secondPage=>firstPage', animate('0.6s ease'))
  ])]
})
export class AppComponent {

  state = 'firstPage';

  nextPage() {
    this.state = 'secondPage';
  }

  previousPage() {
    this.state = 'firstShowing';
  }

}

如您所见，问题是当我有9页时。我不想定义9个状态和18个转换。如何根据页面数执行可重用状态或生成状态并转换运行时？有任何想法吗？

模板看起来像这样

<div class="container">
  <div [@slideTransition]="state" class="page">
    <h1>Page 1</h1>
    <div class="clicker" (click)="nextPage()">clickity</div>
  </div>
  <div …