Question

我是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>

我在想我需要识别点击的卡片并找到一种方法来改变翻转状态＆＃34;状态＆＃34;只在那张卡上，但我不确定如何解决这个问题，或者它是否是最好的方法。

非常感谢任何帮助！

由于

Answer 1

原来，需要将动画触发器添加到每个列表项中。

在Angular4中为组件数组中的一个组件设置动画

1 个答案: