angular - 与 *ngFor 一起使用的角度离开动画

Question

我正在显示包含问题的卡片列表以及与问题相关的详细信息，并且我想在删除问题时显示动画。问题是当我为一个问题按下删除按钮时，滑动动画被应用于所有卡片（或问题）。所以请告诉我，我怎样才能只为我删除的卡应用动画。

<div class="container" *ngIf="questionInfoList">
    <mat-card *ngFor="let questionInfo of questionInfoList" [@removeAnimation]>
         <button mat-icon-button title="delete this question" (click)="deleteQuestion(questionInfo[0])">
                <mat-icon>delete</mat-icon>
         </button>
    </mat-card>
</div>

@Component({
  selector: 'app-admin-questions',
  templateUrl: './admin-questions.component.html',
  styleUrls: ['./admin-questions.component.css'],
  animations: [
    trigger('removeAnimation', [
      transition('* => void', [
        animate('1s', style({
          transform: 'translateX(100%)'
        }))
      ])
    ])
  ]
})
export class AdminQuestionsComponent implements OnInit {

  currentChannel!: string;
  questionInfoList!: Array<Array<string>>;

  constructor(private activeRouter: ActivatedRoute, private admin_service: AdminService, private snack: MatSnackBar,
    private service: EndpointsService, private bottomSheet: MatBottomSheet) 

  deleteQuestion(questionId: string) {
    const numericQuestionId = Number(questionId);
    this.admin_service.deleteQuestion(numericQuestionId).subscribe({
      next: response => {
        this.snack.open(response, '', {
          duration: 3000
        })
      },
      error: err => console.log(err)
    })
  }
  }
}

标签： angulartypescriptangular-animations