在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。