Question

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

如果我点击某个项目并且不删除它（在确认时我选择＆＃39;否＆＃39;），然后我点击另一个项目并将其删除 - 这两个项目都会上课（为什么？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

所以，我已经弄明白了。在{ngFor中的所有元素上设置isDeleted。您应该在对象上拥有一个属性，如下所示：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：从列表动画中删除元素

1 个答案: