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

Question

使用Angular应用程序可以在向导样式配置中使用相当多的Mod。

我正在使用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> 

ps我认为可能是错误的名称，更改RightCenterLeft或任何动画名称，例如 - SlideAnimation。