Question

我正在尝试为*ngFor生成的组件添加动画触发器。我们的想法是单击一个按钮并运行一个方法来更改动画状态并翻转与按钮相关的组件。

我的问题是，当我单击按钮时，所有具有动画触发器的组件都会翻转。我理解为什么（所有人都使用相同的属性来保存动画状态）...但我可以弄清楚如何得到我需要。

这是我的代码

barracks.html

<ion-content padding>
  <ion-grid>
    <ion-row *ngIf="playerTeamSize != undefined">
      <div [ngSwitch]="playerTeamSize" class="barrackTitle">
        <p *ngSwitchCase="-1">Finally you are here. Please pick a warrior</p>
        <p *ngSwitchCase="0">You have no team. You need at least one fighter to survive</p>
        <p *ngSwitchCase="maxTeamSize">Your team is full. Go and explore the world</p>
        <p *ngSwitchDefault>You have {{maxTeamSize - playerTeamSize}} free spots in your team. Pick another warrior</p>
      </div>
    </ion-row>
    <ion-row class="characterCardWrapper">
      <ion-col class="characterCard" col-6 *ngFor="let character of characters">
        <div [@myAnimation]="animationState">
          <character-full [model]="character" (onSelected)="onSelected($event)">
          </character-full>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

barracks.ts

    import { HireCharacter } from './../../engine/D6/Character.commands';
    import { CharacterModel } from './../../components/models/character.model';
    import { HomePage } from './../home/home';
    import { Realm } from './../../engine/GameObjects/GORealm';
    import { CharacterFullComponent } from './../../components/characterFull/character-full.component';
    import { PlayerService } from './../../app/player.service';
    import { KingdomService } from './../../app/kingdom.service';
    import { TransitiveCompileNgModuleMetadata } from '@angular/compiler';
    import { Component, Input } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    import { Organization } from './../../engine/GameObjects/Components/Organization';
    import { trigger, state, style, animate, transition } from '@angular/animations';

    @Component({
      selector: 'page-barracks',
      templateUrl: 'barracks.html',
      providers: [CharacterFullComponent],
      animations: [
        trigger('myAnimation', [
          state('idle', style({ transform: 'rotateY(0deg)'})),
          state('flip', style({ transform: 'rotateY(180deg)'})),
          transition('idle => flip', animate('2s ease-in'))
        ])
      ]
    })

    export class BarracksPage {

      characters = []
      characterIdxMap: { [name: string]: number } = {}
      wait = false
      selected = false
      playerTeamSize
      maxTeamSize = 4
      barracksFirstTime = false
      animationState = 'idle'

      constructor(public navCtrl: NavController, private kingdom: KingdomService, private player: PlayerService) { }

      onSelected(character: any) {
        this.animationState = 'flip'
      }
    }

Answer 1

我最终做的是将动画触发器（和代码）移动到组件本身，因此我们可以封装触发动画的类属性。一切都很好。

角度4动画所有元素都在射击

1 个答案: