0

我是 Angular 的新手，我试图在 Angular 的组件数组中的单个组件（卡片）上设置翻转动画。

我在数组中有 10 张卡片，我只想让点击的卡片翻转。到目前为止，我有代码，所以当任何一张卡片被点击时，它们都会翻转过来。但是，我只想翻转点击的卡片。

这是卡片组件：

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('flipState', [
      state('active', style({
        transform: 'rotateY(179.9deg)'
      })),
      state('inactive', style({
        transform: 'rotateY(0)'
      })),
      transition('active => inactive', animate('500ms ease-out')),
      transition('inactive => active', animate('500ms ease-in'))
    ])  
  ]
})
export class CardComponent {
  @Input() data: Person[];

  flip: string = 'inactive';

  toggleFlip() {
    this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';
  }
}

这是HTML：

 <div *ngFor="let p of data" (click)="toggleFlip()" [@flipState]="flip">
    <div class="card__inner">
      {{ p.name }}
      <h3>{{ p.age }}</h3>
      {{ p.jobTitle }}
    </div>
  </div>

我在想我需要识别被点击的卡片并找到一种方法来改变只有那张卡片上的翻转“状态”，但我不确定如何去做，或者它是否是最好的方法。

任何帮助深表感谢！

谢谢

4

1 回答 1

0

事实证明，动画触发器需要添加到每个列表项中。

于 2017-04-04T12:48:01.493 回答