Angular 5动画结合*ngFor

我正在尝试动画的基础上，一系列的项目卡的数量。这个数字是动态的。我把一些代码放在一起制作动画，但它可以使所有的动画都制作出来。我看不出如何单独设置每个动画

以下是我目前的代码：

import { Component, OnInit, trigger, state, style, transition, animate } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
      <div *ngFor="let item of items" class="tp-box" (click)="toggleFlip()" [@flipState]="flip">
        <div class="tp-box__side tp-box__front">{{item.item}} Front
        </div>
        <div class="tp-box__side tp-box__back">{{item.item}} Back
        </div>
      </div>
  `,
  styles: [
    `
    .tp-box {
      position: relative; width: 200px; height: 100px; margin: 3rem auto;
      transform-style: preserve-3d; transition: transform 1s;
    }
    .tp-box__side {
      width: 100%; height: 100%; position: absolute; backface-visibility: hidden;color: #fff;
      text-align: center; line-height: 100px; font-size: 24px; font-weight: 700; cursor: pointer; user-select: none;
    }
    .tp-box__front {
      background: #f30d36;
    }
    .tp-box__back {
      background: #23262d;
      transform: rotateY(179.9deg);
    }

    `
  ],
  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 AppComponent {

  flip: string = 'inactive';
  constructor() {}

  items: any[] = [
    { "item": "Item 1"},
    { "item": "Item 2"},
    { "item": "Item 3"},
    { "item": "Item 4"},
    { "item": "Item 5"}
  ];

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

}

显然，每次用户单击框时，它都会将“翻转”属性从“活动”设置为“非活动”，然后再设置为“返回”。问题是该属性不是特定于一个长方体的，我不确定如何获得特定于一个长方体的动画

---

下面是一个

您可以在项目本身和toggleFlip函数中添加属性，并将项目作为参数发送。大概是这样的：

template: `
      <div *ngFor="let item of items" class="tp-box" (click)="toggleFlip(item)" [@flipState]="item.flip">
        <div class="tp-box__side tp-box__front">{{item.item}} Front
        </div>
        <div class="tp-box__side tp-box__back">{{item.item}} Back
        </div>
      </div>
  `,

---

这是一个正在工作的

我有一个类似的问题，我在ngFor中有一个开关，它有一个css转换。每当我点击开关时，整个ngFor都会重新渲染，不会发生转换，我使用track by指令来帮助解决这个问题

---

我花了好几个小时在NGN上寻找关于动画的解决方案，但在stackoverflow上没有找到答案，我希望这能节省一些人的时间

谢谢大家!！当你知道怎么做的时候就这么简单了。

items: any[] = [
    { "item": "Item 1", 'flip' : 'inactive'},
    { "item": "Item 2", 'flip' : 'inactive'},
    { "item": "Item 3", 'flip' : 'inactive'},
    { "item": "Item 4", 'flip' : 'inactive'},
    { "item": "Item 5", 'flip' : 'inactive'}
  ];

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