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”是对还是错。

ngFor的角度5/6动画问题

1 个答案: