ngFor的角度5/6動畫問題

Question

使用ngFor我正在我的應用程序中創建4卡。 我想使用角度動畫，例如，如果我單擊第一張卡片，則其他三張卡片應該fadeOut而第一張卡片應該zoomOut 。 我該如何實現

html

<div class="row card-grid">
    <div class="col-6 card-{{card.name | lowercase}}" *ngFor="let card of cards">
      <div class="card text-uppercase" [routerLink]="[card.url]">
        <div class="card-body">
          <fa-icon class="d-block h1 mb-4 text-primary" icon="{{card.icon}}" [rotate]="card.name === 'Call' ? 90 : ''"></fa-icon>
          <h5 class="text-muted m-0">{{card.name}}</h5>
        </div>
      </div>
    </div>
  </div>

TS

trigger(cardAnima, [
 transition(':leave', [
   group([
     query('.card-present', [useAnimation(zoomOut)], {
      optional: true
    }),
    query(
      '.card-call, .card-schedule, .card-lights',
      [useAnimation(fadeOut)],
     {
      optional: true
     }
    )
   ])
  ])
]);

它僅適用於第一次點擊卡片。

Answer 1

您可以創建變量“ selectedItem”來存儲點擊的項目。 因此，如果您的用戶單擊某個項目，則必須設置“ selectedItem = clicked-item;” 那么您可以在卡中添加* ngIf，在其中可以設置CSS類或屬性，具體取決於“ selectedItem = this”是true還是false。