animation - Angular2：从列表动画中删除元素

Question

我有带有卡片（任务）的简单列表（任务）。当我删除任务时，会调用确认对话框。如果用户确认删除，则进行 http 调用。如果成功，变量 isDeleted 设置为 true 并发送到列表项以切换类。这里我遇到几个问题：

1. 如果我单击一个项目并且不删除它（确认后我选择“否”），然后我单击另一个项目并删除它 - 这两个项目都获得了类（为什么？id 不同）。

   <div class="vb-task-card" [ngClass]="{'vb-deleted': task.id === selectedItemId && isDeleted}">
     // here comes the rest of the layout
      <button (click)="onDeleteTask(task)"> DELETE</button>
   </div>
   

如果用户单击按钮，则调用以下函数：

    public onDeleteTask(task) {
       this.selectedItemId = task.id;
       this.deleteTask.emit(task);
    }

2. 如何为我删除的项目添加淡出动画？

ps 如果您需要更多代码或完整代码 - 请告诉我！

提前致谢！

Answer 1

所以，我想通了。isDeleted设置在 *ngFor 中的所有元素上。您应该在对象上有一个属性，如下所示：task.deleted = true并使用它。

动画呢，我按照官方文档。

这是我的代码：

import {Component, Input, Output, EventEmitter,
    trigger,
    state,
    style,
    transition,
    animate} from "@angular/core";

@Component({
selector: "vb-tasks-item",
animations: [
    trigger('taskState', [
        state('inactive', style({opacity: 1, transform: 'translateX(0) scale(1)'})),
        state('active',   style({opacity: 1, transform: 'translateX(0) scale(1)'})),
        state('void',   style({opacity: 0, display: 'none', transform: 'translateX(0) scale(1)'})),
        transition('* => void', [
            animate('1s 8 ease-out', style({
                opacity: 0,
                transform: 'translateX(0) scale(0.5)'
            }))
        ])
    ])
],
template: `
<div class="vb-task-card" @taskState="task.deleted">
</div>`

export class TasksItemComponent {
   @Input() public task: TaskSummary;

   @Output() public deleteTask = new EventEmitter();

   public onDeleteTask(task) {
      task.deleted = (task.deleted === 'active' ? 'inactive' : 'active');
      this.deleteTask.emit(task);
   }

}

如果用户确认删除，我正在设置动画状态（task.deleted）：

public onDeleteModal(isOk) {
    this.isModalOpen = isOk;
    if(isOk) {
        this.tasksSandbox.deleteTask(this.taskToDelete.id)
            .subscribe(res => {
                if (res) {
                    this.taskToDelete.deleted = 'void';
                    this.isModalOpen = !isOk;
                }
            });
    }else{
        this.taskToDelete.deleted = 'inactive';
    }
}