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

Question

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

如果我点击一个项目但不删除它（确认后我选择 'No'），然后我点击另一个项目并将其删除 - 这两个项目都会得到class（为什么？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);
    }

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

p.s。如果您需要更多代码或完整代码 - 让我知道！

提前致谢！

Answer 1

所以，我已经弄明白了。 isDeleted 设置在 *ngFor 中的所有元素上。你应该在你的对象上有一个属性，像这样：task.deleted = true 并使用它。

动画呢，我跟着official documentation。

这是我的代码：

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

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

Angular2: Delete element from the list animation

animation

angular

ngfor