ngFor 的角度 5/6 动画问题答案

【问题标题】：angular 5/6 animation issue with ngForngFor 的角度 5/6 动画问题
【发布时间】：2018-07-19 17:10:30
【问题描述】：

使用 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>

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

它仅适用于第一次卡片点击。

【问题讨论】：

stackoverflow.com/help/mcve

标签： angular animation angular-animations

【解决方案1】：

您可以创建变量“selectedItem”来存储点击的项目。所以如果你的用户点击一个项目，你必须设置“selectedItem=clicked-item;” 那么你可以在卡片中添加一个 *ngIf，你可以在其中设置 css 类或属性，具体取决于“selectedItem=this”是真还是假。

【讨论】：