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都将重新呈现，并且不会发生过渡，我使用跟踪指令来解决该问题see article here。

我在ngFor中寻找了有关动画的解决方案达数小时之久，但没有找到关于stackoverflow的答案，我希望这可以节省很多时间！

Angular 5 animate结合* ngFor

2 个答案: