Angular 2 - Как реализовать Router Animation для определенного 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

Итак, я реализовал решение Hacky:

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

А затем по завершении анимации DeleteThisItem() функция вызывается с этим обратным вызовом (@slideOutAnimation.done)="DeleteThisItem($event)"

Затем я склеиваю элемент из массива в DeleteThisItem() функция.