Angular 2 - 如何爲特定的div實現路由器動畫？

Question

我這裏有一個div的列表，我想要點擊一個特定的元素。目前所有元素都是滑動的，因爲狀態是所有元素的單個變量。

的.html

<div *ngFor="let item of [1,2,3,4,5]" [@slideOutAnimation]="state" (@slideOutAnimation.done)="onDone($event)"> 
    <button (click)="DeleteItem(item)">Delete</button> 
</div> 

---

.TS

@Component({ 
    selector: 'page-box', 
    templateUrl: 'box.html', 
    animations:[ 
     trigger('slideOutAnimation', [ 
      state('inactive',style({ 
       transform: 'translateX(0%)' 
      })), 
      state('active',style({ 
      transform: 'translateX(-200%)' 
      })), 
      transition('inactive => active', animate('500ms ease-out')) 
     ]) 
    ] 
}) 

export class BoxPage{ 

state:string = 'inactive'; 

DeleteItem(item){ 
    this.state = 'active'; 
    } 
} 

Answer 1

好了，所以我實現了一個哈克解決方案：

<div class="card-w" (@slideOutAnimation.done)="DeleteThisItem($event)" [@slideOutAnimation]=" (selecteditem == j) ? 'active':'inactive' " *ngFor="let item of list; let j = index;"> 
<button (click)="ClickedDelete(j)">Delete</button> 
</div> 

讓我跑，你通過我做了什麼。

[@slideOutAnimation]=" (selecteditem == j) ? 'active':'inactive' 

首先，該條件檢查是否我點擊delete按鈕或沒有。

如果我這樣做，那麼它的狀態將被評估爲active，在這種情況下，動畫將從inactive到active狀態播放，從而將其移動到左側。

而且也，當我點擊delete按鈕ClickedDelete(j)函數被調用

ClickedDelete(index){ 
    this.selecteditem = index; 
} 

，然後在動畫completition的DeleteThisItem()函數調用此回調(@slideOutAnimation.done)="DeleteThisItem($event)"

那麼我剪接DeleteThisItem()函數中的數組中的項。