0
*ngForで生成されたコンポーネントにアニメーショントリガーを追加しようとしています。アイデアは、ボタンをクリックすることであり、アニメーションの状態を変更し、ボタンに関連するコンポーネントを反転させるメソッドを実行します。角4のアニメーションすべての要素が点滅しています
私の問題は、アニメーショントリガーフリップを持つすべてのコンポーネントをボタンをクリックすると問題になります。なぜ（すべてがアニメーション状態を保持する同じクラスプロパティを使用しているのか）理解しています...しかし、私は必要を得る方法を理解することができます。ここで
私のコードは、私がやってしまった何を
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'
}
}