Question

使用Angular应用程序，该应用程序将在向导样式配置中处理大量Modals。

我使用Angular-cli来制作项目。

以下是我设置动画的方式：

  animations:[
    trigger('right-center-left',[
      state('right', style({
          transform: 'translateX(100%)'
      })),
      state('center', style({
        transform: 'translateX(0)',
      })),
      state('left', style({
        transform: 'translateX(-100%)',
      })),
      transition('right => center', animate('300ms ease-in')),
      transition('center => left', animate('300ms ease-in')),
    ]),
  ],

我有五个div，有一个.modal类我将要过渡。有一个调用nextModal()的按钮和另一个调用prevModal()的按钮。我尝试做的是当调用nextModal()时，当前模态会滑落，下一个模型会滑入。控制器上的prevModal()函数反之亦然。

我已经在模板中使用此类调用进行了测试：

<button class='right-btn' (click)='prevModal(addressModal,phonesModal)'>Previous</button>
<button class='left-btn' (click)='nextModal(phonesModal, emailModal)'>Next Part</button>

以下是我的模态更改功能：

  nextModal = (current, next) => {
    current = 'left';
    next = 'center';
  }
  prevModal = (prev, current) => {
    prev = 'center';
    current = 'right';
  }

Answer 1

使用元素

上的模板装饰器调用

<li *ngFor="let hero of heroes"
    [@right-center-left]="hero.state"
    (click)="hero.toggleState()">
  {{hero.name}}
</li>

P.S。我认为可以是名称错误，更改RightCenterLeft或任何动画名称，例如 - SlideAnimation。

在Angular 2+中处理动画多个对象

1 个答案: