Javascript Angular 2-如何为特定div实现路由器动画？

我这里有一个

div

列表，我想在单击时滑动一个特定元素。当前，所有元素都在滑动，因为状态是所有元素的单个变量

.html

---

好吧，我实施了一个黑客解决方案：

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

首先，该条件检查我是否单击了

delete

按钮

如果我这样做了，那么它的状态将被评估为

活动

，在这种情况下，动画将从

非活动

播放到

活动

状态，从而将其移到左侧

而且，当我单击

删除

按钮时，调用

单击删除（j）

函数

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

然后，在动画完成时，将使用此回调调用

（@slideOutAnimation.done）=“deletetetetThisItem（$event）”

然后在

DeleteThisItem（）

函数中从数组中拼接项目

<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'

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