Angular 5 动画结合 *ngFor

Question

我正在尝试为一些基于项目数组的卡片制作动画。数字是动态的。我已经整理了一些动画代码，但它为所有这些动画。我看不出如何为每一个单独制作动画。

到目前为止，这是我的代码：

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';
  }

}

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

这是一个plunkr

Answer 1

您可以将属性添加到项目本身和 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>
  `,

TS :

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';
  }

这是一个有效的 plunkr

Answer 2

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

我在 ngFor 中寻找了几个小时关于动画的解决方案，但在 Whosebug 上没有找到答案，我希望这可以节省很多时间！

Angular 5 动画结合 *ngFor

Angular 5 animate combined with *ngFor

angular

angular-animations