角度2 - 特定のdivのルータアニメーションを実装する方法は？

Question

私はここにdivのリストを持っています、私はクリックで特定の要素をスライドさせたいと思います。現在、stateはすべての要素に対して単一の変数であるため、すべての要素がスライドしています。

.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()関数です。